jQuery: Real-time search

Question

I am trying to build real-time search project but i am not sure what wrong with my code. if i search "AAA - AAA" a results is show but when i search "TOF0042 - text update + resize" a results not show up.

Could you help me?

• HTML Code

<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 Code

(function($){

$(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 { display:none; }

Demo: Fiddle

Answer 1

In "TOF0042 - text update + resize" you have the character "+", which is a quantifier in Regular expressions.

To search "TOF0042 - text update + resize" you will need to check for special character within your string. In this case + should be \+.

How to escape special characters using regular expressions

More info about Javascript regular expressions

Working demo