ansaurus

Question

Answer 1

+4 A:

This looks very inefficient if you have a larger set of contacts to be displayed. The easiest way would be to use jQuery and bind a function to keyup event of your text field: (assuming the above code is contained inside something like <div id="contactlist">)


var searchstring = "";

function filterContact() {
  var jthis = $(this); // should give a tiny performance gain
  if ($('span.contactItem', this).text().toLowerCase().indexOf(searchstring) >= 0) {
    jthis.addClass('matching');
    jthis.removeClass('nonmatching');
  } else {
    jthis.addClass('nonmatching');
    jthis.removeClass('matching');
  }
}

function filterContacts() {
  var elem = $('input#yourtextfield')[0];
  searchstring = elem.value.toLowerCase(); // because we like to match all cases
  searchstring = searchstring.replace(/^\s+/,'').replace(/\s+$/,''); // trim

  $('#contactlist div').each(filterContact);
}

function initFiltering() {
  $('input#yourtextfield').live('keyup',filterContacts);
}

$(document).ready(initFiltering);

Also add .matching and .nonmatching classes to your CSS. (display: block and none)

As said, this is quite inefficient, not only by memory (and bandwidth) needed but also by CPU time on filtering (plus rendering time). It could be faster if you process that data inside some array or if you have very large datasets you should fetch the filtered data paginated from server on demand (can also be done by jQuery's AJAX functions). You could also filter delayed in case the user is still typing (filter only if he stopped typing for ~500ms).

toLowerCase() could have some difficulties with non-ASCII input; so if you need it you should test it on your target languages.

Energiequant 2009-02-22 13:07:17

Check my answer it helped me more and worked perfect http://stackoverflow.com/questions/574816/search-in-html-javascript/903517#903517

Amr ElGarhy 2009-05-24 10:52:18

Answer 2

+1 A:

this may help you :

javascript :

<script language="javascript">
function go(){
    elem = document.getElementById("thesearch");
    for (var x=4;x<=7;x++){ 
      if (((document.getElementById('contactName_'+x).innerHTML).toUpperCase()).indexOf((elem.value).toUpperCase()) > -1)  
     document.getElementById('contact_'+x).style.display = "";  
     else  
     document.getElementById('contact_'+x).style.display = "none"; 
    }

}   
</script>
</head>
<body>

HTML :

<input type="text" value="" id="thesearch" onkeyup="go();" />

Note the number of div to check is fixed and static in my exemple. This should be improved, but this exemple work in IE6 / FF3.

Hope this can help.

Edit : oh yeah, the toUpperCase() can be removed, if you want something case sensitive

RVeur23 2009-02-23 14:58:16

Answer 3

A:

I found this article, which really solved my problem and its faster than all other solutions i tried:

jQuery Inline Search Plugin

Amr ElGarhy 2009-05-24 10:51:00

ansaurus

tags:

views:

answers:

Search in html Javascript

related questions