Posted By

alexandrepayet on 04/19/10


Tagged

javascript data search html input jquery filter user while keyup dynamically filtrer donnees recherche automatiquement champ dynamiquement during pendant saisie


Versions (?)

HTML, JS, JQUERY : filtrer dynamiquement une liste de noms (ou autre) pendant la saisie dans le champ de recherche


 / Published in: HTML
 

  1. <!-- html sample -->
  2.  
  3. <ul>
  4. <li class="name-list">pierre</li>
  5. <li class="name-list">jean</li>
  6. <li class="name-list">laurent</li>
  7. <li class="name-list">antoinne</li>
  8. <li class="name-list">sébastien</li>
  9. <li class="name-list">françois</li>
  10. </ul>
  11.  
  12.  
  13. <script type="text/javascript">
  14. //<![CDATA[
  15.  
  16. /* script to dynamically filter a list by name with a user search
  17.  
  18. #search is an input[text] where users can enter a name
  19. Name in list and user input must to be in lowercase. This filter is case sensitive so we're going to lowercase user input before searching
  20. We use the jQuery function 'contains()' directly in our selector to look for an occurence of the user input in the element.
  21. --------------------------------------------------------------------*/
  22. $("#search").bind("keyup", function(){
  23. var name = $("#search").val();
  24. name = name.toLowerCase();
  25. $(".name-list").hide();
  26. $(".name-list:contains('"+strToSearch+"')").show();
  27. });
  28. //]]>

Report this snippet  

You need to login to post a comment.