фильтровать элементы, не содержащие строку поиска [есть решение, ищет улучшения]

Question

ОК, это было сложно описать в названии. Что у меня есть поле ввода и три пункта [будет ссылаться на них как «Ps»]

<p>ABCD</p> 
<p>CDEF</p> 
<p>XYZ</p> 

теперь, когда кнопка нажата в поле ввода абзацы, которые не содержат строку поиска отфильтрованы hide(). Совершено следующим:

$("input").keyup(function(){ 
    var x = $(this).val(); 
    $("p:not(:contains('" + x + "'))").hide(); 
}); 

когда забой или удалить нажимается Ps, которые не содержат строку поиска получить снова show() показано, как это:

$("input").keydown(function(){ 
     var x = $(this).val(); 
     var key = event.keyCode || event.charCode; 

     if(key == 8 || key == 46){ 
      $("p:not(:contains('" + x + "'))").show(); 
     } 
}); 

Теперь это вызывает странное поведение. Я очень плохо объясняя это .. Для того, чтобы получить то, что я говорю следующие шаги в этом fiddle result

1. мыши в поле ввода

2. типа «ABC» [сразу же после ввода ' а»последние два Ps скрыты]

3. типа„х“[поэтому вход теперь„abcx“и первый P был скрыт]
4. нажмите Backspace и уделять пристальное внимание [все Ps показаны для сплит-секунда, и после этого только первый остается в виде inte nded]

Вот full JSFiddle

Итак, что я хотел бы знать, если есть в любом случае, чтобы не было все Ps показано, что на долю секунды, и только что первый P отображается, когда забой нажата.

Answer 1

Вы просто можете сделать это, как этот

$("input").keyup(function(){ 
     var x = $(this).val(); 
     $("p:not(:contains('" + x + "'))").hide(); 
     $("p:contains('" + x + "')").show(); 
}); 

Fiddle

Answer 2

Причиной такого поведения является потому, что на KeyDown у вас есть

$("p:not(:contains('" + x + "'))").show(); 

Который говорит для каждого р, который не содержащий мой текст, показать его.

А потом на KeyUp, за тот же ключ, у вас есть

$("p:not(:contains('" + x + "'))").hide(); 

Который говорит для каждого р, который не содержит мой текст, скрыть.

Я считаю

$("p:not(:contains('" + x + "'))").show(); 

Должен быть ответ

$("p:contains('" + x + "')").show(); 

Void является правильным для объединения вашего кода и делает также устранить проблему, однако это объясняет, где проблема была в коде, публикуемой.