Return to Snippet

Revision: 26146
at April 19, 2010 02:24 by alexandrepayet


Updated Code
<!-- html sample -->

<ul>
	<li class="name-list">pierre</li>
	<li class="name-list">jean</li>
	<li class="name-list">laurent</li>
	<li class="name-list">antoinne</li>
	<li class="name-list">sébastien</li>
	<li class="name-list">françois</li>
</ul>


<script type="text/javascript">
//<![CDATA[

/* script to dynamically filter a list by name with a user search

#search is an input[text] where users can enter a name
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
We use the jQuery function 'contains()' directly in our selector to look for an occurence of the user input in the element.
--------------------------------------------------------------------*/

$("#search").bind("keyup", function(){

	var name = $("#search").val();
	name = name.toLowerCase();
	
	$(".name-list").hide();
	$(".name-list:contains('"+strToSearch+"')").show();

});
//]]>
</script>

Revision: 26145
at April 19, 2010 02:22 by alexandrepayet


Initial Code
<!-- html sample -->

<ul>
	<li class="name-list">pierre</li>
	<li class="name-list">jean</li>
	<li class="name-list">laurent</li>
	<li class="name-list">antoinne</li>
	<li class="name-list">sébastien</li>
	<li class="name-list">françois</li>
</ul>


<script type="text/javascript">
//<![CDATA[

/* script to dynamically filter a list by name with a user search

#search is an input[text] where users can enter a name
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
We use the jQuery function 'contains()' directly in our selector to look for an occurence of the user input in the element.
--------------------------------------------------------------------*/

$("#search").bind("keyup", function(){

	var name = $("#search").val();
	name = name.toLowerCase();
	
	$(".name-list").hide();
	$(".name-list:contains('"+strToSearch+"')").show();

});
//]]>
</script>

Initial URL


Initial Description


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

Initial Tags
javascript, data, search, html, jquery, filter, user

Initial Language
HTML