Помогите фиксануть backspace

[rootcamp]

Добрый день. Взял плагин 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);

[Nexus]

Если вы хотите, чтобы вам помогли - опубликуйте код здесь.
Очень немногие станут скачивать архив, чтобы посмотреть, что у вас не так.

[rootcamp]

Если вы хотите, чтобы вам помогли - опубликуйте код здесь.
Очень немногие станут скачивать архив, чтобы посмотреть, что у вас не так.

Поступил так, как вы и сказали..просто вдруг кому не понравится, что слишком много букв ))

[рони]

rootcamp,
перенести строки 45 и 46 в 23.

[rootcamp]

rootcamp,
перенести строки 45 и 46 в 23.

В этом случае возникают проблемы с отображением - например, несколько раз скроется, появится результат запроса, который не удовлетворяет условию..не подскажете в чем причина ?

[рони]

rootcamp,
перед всеми анимациями добавьте ().stop().fade...

[рони]

rootcamp,

(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).stop().fadeIn("fast");
                               $(e).children().stop().fadeIn("fast");
                               $(e).children('div.alphabet-line ~ div:not([data-search*="'+valor+'"])').stop().fadeOut("fast");
                             }else {
                               $(e).stop().fadeOut("fast");
                               $(e).children().stop().fadeOut("fast");
                             }
                           }
                         );
                         $('.reser').text("Показано : "+dis+" по запросу " + valor).stop().fadeIn("fast");
                       }else {
                         $('.reser').text("Показано : Все").stop().fadeIn("fast");
                         $(".containerItems .row").stop().fadeIn("fast");
                         $(".containerItems .row").children().stop().fadeIn("fast");
                         return;
                       }
                       search(el);
                       // console.log(el);
                     }, timeout
                   );
                 }
               ).on('blur', function() {
                   //when leaving the input
                   $(".containerItems .row").stop().fadeIn("slow");
                   $(".containerItems .row").children().stop().fadeIn("slow");
                   search(el);
                 }
               );
             }
           );
         }
       }
     );
   }
 )(jQuery);

[rootcamp]

(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).stop().fadeIn("fast");
                               $(e).children().stop().fadeIn("fast");
                               $(e).children('div.alphabet-line ~ div:not([data-search*="'+valor+'"])').stop().fadeOut("fast");
                             }else {
                               $(e).stop().fadeOut("fast");
                               $(e).children().stop().fadeOut("fast");
                             }
                           }
                         );
                         $('.reser').text("Показано : "+dis+" по запросу " + valor).stop().fadeIn("fast");
                       }else {
                         $('.reser').text("Показано : Все").stop().fadeIn("fast");
                         $(".containerItems .row").stop().fadeIn("fast");
                         $(".containerItems .row").children().stop().fadeIn("fast");
                         return;
                       }
                       search(el);
                       // console.log(el);
                     }, timeout
                   );
                 }
               ).on('blur', function() {
                   //when leaving the input
                   $(".containerItems .row").stop().fadeIn("slow");
                   $(".containerItems .row").children().stop().fadeIn("slow");
                   search(el);
                 }
               );
             }
           );
         }
       }
     );
   }
 )(jQuery);

Большое спасибо!