Hello,

I am currently learning jquery and was wondering how to use an input box to filter my list elements

I have this HTML code so far:

In the script below there are checkboxes that filter the content in the results section near the end on the script.

Now, I would like to add a search field to find the inputted results. This search field is at the beginning of the script below. So when I type for example 'Kobe' in the search field and press the 'Add' link/button, I would like jquery to filter and display all things pertaining 'Kobi'

so im hoping someone can help me with this since everything I tried so far doesn't really work at all. Also I don't want any jquery autosuggest plugins since thats not the effect im going for.

Thank you far any help.

HTML Code:
<body>
<ul>   
    <li class="section keyword">
    <input id="newtag" class="text" type="text" value="filter by keyword" name="keyword"/>
        <ul class="buttons">
            <li class="button add">
            <a id="addtag" href="#">
            <em>Add</em>
            </a>
            </li>
        </ul>
    </li>
</ul>

<h2>FILTER PRODUCTS BY:</h2>
<div id="sport-cat">
<p>Sport:</p>
<div>
	<input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" />
	<label for="type_4">Soccer</label>
</div>
<div>
	<input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" />
	<label for="type_1">Baseball/ Softball</label>
</div>
<div>
	<input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" />

	<label for="type_2">Basketball</label>
</div>
<div>
	<input name="type[]" type="checkbox" id="type_5" value="5" class="type_check" checked="checked" />
	<label for="type_5">Boxing</label>
</div>
<div>
	<input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" />
	<label for="type_3">Football</label>

</div>
<div>
	<input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" />
	<label for="type_0">Golf</label>
</div>
</div>
<div id="model-cat">
<p>Model:</p>
<div>
	<input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" />
	<label for="start_072009">T-Shirts</label>
</div>

<div>
	<input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" />
	<label for="start_082009">Shorts</label>
</div>
<div>
	<input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" />
	<label for="start_092009">Hats & Caps</label>
</div>
<div>
	<input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" />

	<label for="start_102009">Jackets</label>
</div>
</div>
<div id="color-cat">
<p>Color:</p>
<div>
	<input name="color[]" type="checkbox" id="color_072010" value="072010" class="color_check" checked="checked" />
	<label for="color_072010">Black</label>
</div>

<div>
	<input name="color[]" type="checkbox" id="color_082010" value="082010" class="color_check" checked="checked" />
	<label for="color_082010">Blue</label>
</div>
<div>
	<input name="color[]" type="checkbox" id="color_092010" value="092010" class="color_check" checked="checked" />
	<label for="color_092010">Green</label>
</div>

</div>
<h2>Results</h2>
<ul id="events">
	<li id="event_1768" class="type_1 start_072009 color_072010">
			<h3>BASEBALL/SOFTBALL - Nike Manny Pacquiao (Giants) Men's T-Shirt</h3>
	</li>
	<li id="event_2190" class="type_2 start_072009 color_082010">
			<h3>LeBron Vs. Men's T-Shirt</h3>

	</li>
	<li id="event_2191" class="type_2 start_082009 color_092010">
			<h3>Kobe Supreme Men's Basketball Shorts</h3>
	</li>
	<li id="event_1864" class="type_2 start_072009 color_082010">
			<h3>Kobe Vs. Men's T-Shirt</h3>
	</li>
</ul>
</body>
</html>