Search list items

Use text input to search text within a list

by Jon Fuller

HTML

<input type="text" id="list-searchbox" placeholder="Type to search">
<ul id="search-list">
	<li>tester</li>
	<li>testing 123 tester</li>
	<li>testering and more test 342</li>
	<li>just esting around</li>
	<li>see what i typed here</li>
	<li>list item here</li>
	<li>hi, <strong>how are</strong> you doing today?</li>
</ul>

CSS

body {padding: 20px;}

JavaScript

var $listitems = jQuery('#search-list li');
jQuery('#list-searchbox').keyup(function() {
    var val = jQuery.trim(jQuery(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $listitems.show().filter(function() {
        var text = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});