jQuery: Поиск в реальном времени

Question

Я пытаюсь создать проект поиска в режиме реального времени, но я не уверен, что случилось с моим кодом. если я ищу «AAA - AAA», результат показывается, но при поиске «TOF0042 - текстовое обновление + изменение размера» результат не отображается.

Не могли бы вы мне помочь?

• HTML код

<input type="text" id="search-project" name="search-project"> 
<ul class="list-porject"> 
    <li>AAA - AAA</li> 
    <li>BBB - BBB</li> 
    <li>0546 - Testing</li> 
    <li>TOF0042 - text update + resize</li> 
</ul> 

• JQuery код

(функция ($) {

$(document).ready(function() { 
    $("#search-project").keyup(function(){   
     var filter = $(this).val();     
     $(".list-porject li").each(function(){ 
      if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
     $(this).addClass('hidden'); 
     } else { 
       $(this).removeClass('hidden'); 
    } 
     }); 

}); })}) (jQuery);

• CSS

.hidden {дисплей: нет; }

Демо: Fiddle

Answer 1

В "TOF0042 - текст обновление + размер" у вас есть символ "+", который является квантор в регулярных выражениях.

Для поиска «TOF0042 - текстовое обновление + изменение размера» вам нужно будет проверить специальный символ внутри вашей строки. В этом случае + должен быть \+.

How to escape special characters using regular expressions

More info about Javascript regular expressions

Рабочая demo