Me ayudan a que este buscador funcione?

  • Autor Autor Ketchup
  • Fecha de inicio Fecha de inicio
Ketchup

Ketchup

Delta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Buenas como están? Necesito una ayudita si es que pueden... Necesito hacer funcionar este buscador al igual el sitio web de ejemplo


Necesito que realice la búsqueda de la misma forma

Pagina de ejemplo: https://canales.online/

Pagina en la que funcione el buscador: https://dogstips.info/

codigo js

Como lo adapto a la estructura de mi sitio?, si me pueden dar una mano porfa

Si me pueden ayudar estaría muy agradecido, saludos
 
JavaScript:
var $filters = $('.filter [data-filter]')
  , $boxes = $('.boxes [data-category]');
$filters.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    $filters.removeClass('active');
    $this.addClass('active');
    var $filterCategory = $this.attr('data-filter');
    if ($filterCategory == 'all') {
        $boxes.removeClass('is-animated').fadeOut().promise().done(function() {
            $boxes.addClass('is-animated').fadeIn();
        });
    } else {
        $boxes.removeClass('is-animated').fadeOut().promise().done(function() {
            $boxes.filter('[data-category = "' + $filterCategory + '"]').addClass('is-animated').fadeIn();
        });
    }
});
$(document).ready(function() {
    $('#buscar').on('input', function() {
        var value = $(this).val().toLowerCase();
        $('.boxes > .card-wrapper').filter(function() {
            $(this).toggle($(this).find('div').attr('title').toLowerCase().indexOf(value) > -1)
        });
    });
});
window.onclick = function(event) {
    if (event.target.matches('.card')) {
        var dropbuttons = document.getElementsByClassName("card");
        for (var i = 0; i < dropbuttons.length; i++) {
            var openDropdown = dropbuttons[i];
            if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
        event.target.classList.toggle("show");
    }
}
document.addEventListener("DOMContentLoaded", function() {
    var e;
    if ("IntersectionObserver"in window) {
        e = document.querySelectorAll(".lazy");
        var n = new IntersectionObserver(function(e, t) {
            e.forEach(function(e) {
                if (e.isIntersecting) {
                    var t = e.target;
                    t.src = t.dataset.src,
                    t.classList.remove("lazy"),
                    n.unobserve(t)
                }
            })
        }
        );
        e.forEach(function(e) {
            n.observe(e)
        })
    } else {
        var t;
        function r() {
            t && clearTimeout(t),
            t = setTimeout(function() {
                var n = window.pageYOffset;
                e.forEach(function(e) {
                    e.offsetTop < window.innerHeight + n && (e.src = e.dataset.src,
                    e.classList.remove("lazy"))
                }),
                0 == e.length && (document.removeEventListener("scroll", r),
                window.removeEventListener("resize", r),
                window.removeEventListener("orientationChange", r))
            }, 20)
        }
        e = document.querySelectorAll(".lazy"),
        document.addEventListener("scroll", r),
        window.addEventListener("resize", r),
        window.addEventListener("orientationChange", r)
    }
});
 
es tu web? https://dogstips.info/ ?

veo que usas "/scripts/select2.min.js", con eso es suficiente para copiar el funcionamiento que quieres. No necesitas todo el código de arriba que pegaste.

Sigue la documentación del plugin. O también solo lo podrías hacer con Jquery. Si no tienes idea de lo que hablo, contrata un programador es un trabajo muy sencillo no te deberían cobrar mucho.
 
es tu web? https://dogstips.info/ ?

veo que usas "/scripts/select2.min.js", con eso es suficiente para copiar el funcionamiento que quieres. No necesitas todo el código de arriba que pegaste.

Sigue la documentación del plugin. O también solo lo podrías hacer con Jquery. Si no tienes idea de lo que hablo, contrata un programador es un trabajo muy sencillo no te deberían cobrar mucho.

Si si esa es, estoy probando pero no logro hacerla funcionar
 
Abre la consola de desarrollador, y veras que hay un error.
a simple vista, me parece que es por el orden donde llamas a los scripts, haz que <script src="/scripts/search.js"></script> este después de el archivo de jQuery.

Y ya estaría funcionando todo.
 
asi sera fija tu html?

<a href="/envivo/tv-publica-en-vivo/" data-filter-item="true" data-filter-name="television publica tv publica">
<li class="flex-item">
<img loading="lazy" src="/webp/logos/optimized/tvpublica.webp" class="img2" />
</li>
</a>

En la original es asi

<div class=container id=container>
<input id="buscar" type="search" placeholder="Buscar canal..." class="search">
<div class="boxes">
<div data-category="deportes" class="card-wrapper">
<a href="/star-plus/"><div class="card" title="Eventos Star+"><img class="img-drop" src="/img/starplus.png" alt="Ver Eventos Star+ Online en vivo" title="Eventos Star+"></div></a>
</div>
 
pones el css stylewp.css
jquery-3.5.1.min.js
y el scripts.js?2
el html basico…

<div class=container id=container>
<input id="buscar" type="search" placeholder="Buscar canal..." class="search">
<div class="boxes">

<div data-category="deportes" class="card-wrapper">
<a href=" link">
<div class="card" title="puko">
<img class="img-drop" src="https://forobeta.com/data/avatars/m/287/287877.jpg">
</div>
</a>
</div>


<div data-category= ... </div>
<div data-category= ... </div>
<div data-category= ... </div>

</div>
</div>

el div categoria
el link
la imagen
el div card y con title busca la imagen



antes

2023-10-19.23-16-05.jpg


después al buscar "puko"

2023-10-19.23-16-42.jpg
 
Última edición:
codigos charros que ralentizan tu pagina
 
pones el css stylewp.css
jquery-3.5.1.min.js
y el scripts.js?2
el html basico…

<div class=container id=container>
<input id="buscar" type="search" placeholder="Buscar canal..." class="search">
<div class="boxes">

<div data-category="deportes" class="card-wrapper">
<a href=" link">
<div class="card" title="puko">
<img class="img-drop" src="https://forobeta.com/data/avatars/m/287/287877.jpg">
</div>
</a>
</div>


<div data-category= ... </div>
<div data-category= ... </div>
<div data-category= ... </div>

</div>
</div>

el div categoria
el link
la imagen
el div card y con title busca la imagen



antes

Ver el archivo adjunto 1119170

después al buscar "puko"

Ver el archivo adjunto 1119171

Claro pero yo quiero hacerlo funcionar en esta pagina

 
Claro pero yo quiero hacerlo funcionar en esta pagina
1. para que funcione el buscador asi como esta tu html ocupas modificar la parte del script en search,js

$(document).ready(function() {
$('#buscar').on('input', function() {
var value = $(this).val().toLowerCase();
$('.boxes > .card-wrapper').filter(function() {
$(this).toggle($(this).find('div').attr('title').toLowerCase().indexOf(value) > -1)
});
});
});

2. el input donde busca/introduces la palabra es <input id="buscar"
el tuyo es <input id="buscador"

este es el error que te da de "id null"
no el acomodo de scripts

el script que busca esta en search.js
no en select2.min.js

boxes > .card-wrapper es donde va buscar
el tuyo es list-group > .flex-container

la parte exacta donde busca es boxes > .card-wrapper > .attr('title')
y la tuya seria list-group > .flex-container > a > data filter-name

En resumen ...

JavaScript:
$(document).ready(function() {
    $('#buscador').on('input', function() {
        var value = $(this).val().toLowerCase();
        $('.list-group > .flex-container > a').filter(function() {
            $(this).toggle($(this).data('filter-name').toLowerCase().indexOf(value) > -1)
        });
    });
});

* con data-filter-name="
es la palabra(s) donde busca lo puesto en el input/buscador

4. Antes

2023-10-20.21-13-07.jpg


5. Después

2023-10-20.21-13-30.jpg
 
Última edición:
asi funciona el buscador, pero tiene varias etiquetas de mas como
<body>
<div></div>

 
Última edición:
1. para que funcione el buscador asi como esta tu html ocupas modificar la parte del script en search,js

$(document).ready(function() {
$('#buscar').on('input', function() {
var value = $(this).val().toLowerCase();
$('.boxes > .card-wrapper').filter(function() {
$(this).toggle($(this).find('div').attr('title').toLowerCase().indexOf(value) > -1)
});
});
});

2. el input donde busca/introduces la palabra es <input id="buscar"
el tuyo es <input id="buscador"

este es el error que te da de "id null"
no el acomodo de scripts

el script que busca esta en search.js
no en select2.min.js

boxes > .card-wrapper es donde va buscar
el tuyo es list-group > .flex-container

la parte exacta donde busca es boxes > .card-wrapper > .attr('title')
y la tuya seria list-group > .flex-container > a > data filter-name

En resumen ...

JavaScript:
$(document).ready(function() {
    $('#buscador').on('input', function() {
        var value = $(this).val().toLowerCase();
        $('.list-group > .flex-container > a').filter(function() {
            $(this).toggle($(this).data('filter-name').toLowerCase().indexOf(value) > -1)
        });
    });
});

* con data-filter-name="
es la palabra(s) donde busca lo puesto en el input/buscador

4. Antes

Ver el archivo adjunto 1119821

5. Después

Ver el archivo adjunto 1119822


Genio, muchisimas gracias
 
Atrás
Arriba