Me ajudam a fazer este buscador funcionar?

  • Autor Autor Ketchup
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Ketchup

Ketchup

Delta
Verificado
Verificación en dos pasos activada
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
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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 edição:
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 o anexo 1119170

después al buscar "puko"

Ver o anexo 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 edição:
asi funciona el buscador, pero tiene varias etiquetas de mas como
<body>
<div></div>

 
Última edição:
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 o anexo 1119821

5. Después

Ver o anexo 1119822


Genio, muchisimas gracias
 
Voltar
Topo