Ketchup
Delta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
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.
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
1. para que funcione el buscador asi como esta tu html ocupas modificar la parte del script en search,jsClaro pero yo quiero hacerlo funcionar en esta pagina
$(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)
});
});
});
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
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?