2

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

Vuthy Sok
  • 720
  • 3
  • 10
  • 22
  • As best I understand it, your fiddle works for either search. –  Feb 20 '14 at 01:18
  • Did you search for "TOF0042 - text update + resize"? Can you copy and paste this word into textbox search? you will know what problem – Vuthy Sok Feb 20 '14 at 01:22

1 Answers1

4

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

Community
  • 1
  • 1
vsgoulart
  • 151
  • 1
  • 6