Добрый день. Взял плагин E-SEARCH и чуть чуть переделал под свои нужды. не могу понять, почему когда я щелкаю backspace в input'е, результат поиска не обновляется, хотя length меняется..может вы увидите среди моих говноправок ошибку ))
1 html и сам скрипт во вложениях. Помогите, если не трудно..или направьте на истинный путь
Если вдруг не хочется качать
<input type="text" class="form-control search-game">
<div class="containerItems">
<div class="row" style="margin-bottom: 25px;"><div class="col-md-12 alphabet-line"><div class="alphabet">C</div></div>
<div data-game="cs go" data-search="cs go go cs контра кс кс го го коэс" class="col-md-3 col-xs-4 game-main">
<div class="promo-game-item">
<div class="game-title" data-equale="cs go go cs контра кс кс го го коэс">
<a style="color: black; font-weight: 500" class="islink" >CS GO</a> <span style="font-family: Jura,sans-serif;text-transform: uppercase;color: #aca8b1;font-weight: 400"> - 0 </span><span class="related"><i class="fa fa-star" aria-hidden="true"></i></span></div>
<ul class="list-inline" style="font-size: 12px;"><li><a class="islink game-link" href="" data-type="item">Предметы</a></li><li><a class="islink game-link" data-type="accounts">Аккаунты</a></li><li><a class="islinkgame-link" data-type="yclygi">Услуги</a></li></ul> </div>
</div>
<div data-game="cs go" data-search="cs go go cs контра кс кс го го коэс" class="col-md-3 col-xs-4 game-main">
<div class="promo-game-item">
<div class="game-title" data-equale="cs go go cs контра кс кс го го коэс">
<a style="color: black; font-weight: 500" class="islink" >CS GO</a> <span style="font-family: Jura,sans-serif;text-transform: uppercase;color: #aca8b1;font-weight: 400"> - 0 </span><span class="related"><i class="fa fa-star" aria-hidden="true"></i></span></div>
<ul class="list-inline" style="font-size: 12px;"><li><a class="islink game-link" href="" data-type="item">Предметы</a></li><li><a class="islink game-link" data-type="accounts">Аккаунты</a></li><li><a class="islinkgame-link" data-type="yclygi">Услуги</a></li></ul> </div>
</div>
</div>
<div class="row" style="margin-bottom: 25px;"><div class="col-md-12 alphabet-line"><div class="alphabet">M</div></div>
<div data-game="cs go" data-search="minecraft c" class="col-md-3 col-xs-4 game-main">
<div class="promo-game-item">
<div class="game-title" data-equale="minecraft">
<a style="color: black; font-weight: 500" class="islink" >MINECRAFT</a> <span style="font-family: Jura,sans-serif;text-transform: uppercase;color: #aca8b1;font-weight: 400"> - 0 </span><span class="related"><i class="fa fa-star" aria-hidden="true"></i></span></div>
<ul class="list-inline" style="font-size: 12px;"><li><a class="islink game-link" href="" data-type="item">Предметы</a></li><li><a class="islink game-link" data-type="accounts">Аккаунты</a></li><li><a class="islinkgame-link" data-type="yclygi">Услуги</a></li></ul> </div>
</div>
<div data-game="cs go" data-search="milita" class="col-md-3 col-xs-4 game-main">
<div class="promo-game-item">
<div class="game-title" data-equale="ilita">
<a style="color: black; font-weight: 500" class="islink" >MILITA</a> <span style="font-family: Jura,sans-serif;text-transform: uppercase;color: #aca8b1;font-weight: 400"> - 0 </span><span class="related"><i class="fa fa-star" aria-hidden="true"></i></span></div>
<ul class="list-inline" style="font-size: 12px;"><li><a class="islink game-link" href="" data-type="item">Предметы</a></li><li><a class="islink game-link" data-type="accounts">Аккаунты</a></li><li><a class="islinkgame-link" data-type="yclygi">Услуги</a></li></ul> </div>
</div>
</div>
<div class="row" style="margin-bottom: 25px;"><div class="col-md-12 alphabet-line"><div class="alphabet">D</div></div>
<div data-game="cs go" data-search="ddd" class="col-md-3 col-xs-4 game-main">
<div class="promo-game-item">
<div class="game-title">
<a style="color: black; font-weight: 500" class="islink" >DD</a> <span style="font-family: Jura,sans-serif;text-transform: uppercase;color: #aca8b1;font-weight: 400"> - 0 </span><span class="related"><i class="fa fa-star" aria-hidden="true"></i></span></div>
<ul class="list-inline" style="font-size: 12px;"><li><a class="islink game-link" href="" data-type="item">Предметы</a></li><li><a class="islink game-link" data-type="accounts">Аккаунты</a></li><li><a class="islinkgame-link" data-type="yclygi">Услуги</a></li></ul> </div>
</div>
<div data-game="cs go" data-search="ded" class="col-md-3 col-xs-4 game-main">
<div class="promo-game-item">
<div class="game-title" >
<a style="color: black; font-weight: 500" class="islink" >DeD</a> <span style="font-family: Jura,sans-serif;text-transform: uppercase;color: #aca8b1;font-weight: 400"> - 0 </span><span class="related"><i class="fa fa-star" aria-hidden="true"></i></span></div>
<ul class="list-inline" style="font-size: 12px;"><li><a class="islink game-link" href="" data-type="item">Предметы</a></li><li><a class="islink game-link" data-type="accounts">Аккаунты</a></li><li><a class="islinkgame-link" data-type="yclygi">Услуги</a></li></ul>
</div>
</div>
</div>
</div>
<span class="reser">Показано : Все</span>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="ss.js"></script>
<script>$('input.form-control.search-game').search(function(){});</script>
(function($){
$.fn.extend({
search: function(callback,timeout){
timeout = timeout || 100;
var timeoutReference,
search = function(el){
if (!timeoutReference) return;
timeoutReference = null;
callback.call(el);
};
return this.each(function(i,el){
var $el = $(el);
$el.is(':input') && $el.on('keyup keydown',function(e){
if (e.type=='keyup' && e.keyCode==8 ) return;
console.log(e.which );
if (timeoutReference) clearTimeout(timeoutReference);
timeoutReference = setTimeout(function(){
var valor = el.value.toLowerCase();
console.log(valor);
if(valor.length){
const dis = $(".containerItems .row [data-search*='" + valor + "']").length;
$('.containerItems .row').each(function(i, e){
const one = $(e).children('div[data-search*="'+valor+'"]');
if(one.length > 0){
$(e).children('div.alphabet-line ~ div:not([data-search*="'+valor+'"])').fadeOut("fast");
}else{
$(e).fadeOut("fast");
$(e).children().fadeOut("fast");
$('.reser').text("Показано : "+dis+" по запросу " + valor).fadeIn("fast");
}
});
}else{
$('.reser').text("Показано : Все").fadeIn("fast");
$(".containerItems .row").fadeIn("fast");
$(".containerItems .row").children().fadeIn("fast");
return;
}
search(el);
// console.log(el);
}, timeout);
}).on('blur',function(){
//when leaving the input
$(".containerItems .row").fadeIn("slow");
$(".containerItems .row").children().fadeIn("slow");
search(el);
});
});
}
});
})(jQuery);