Hello,
I have been looking around on ways I can implement an input box on my webpage that will filter by keywords, much like the one buysellads.com uses here where you type in a keyword related to the site and it automatically filters the list. For example if you type 'photoshop' it will grab all site containg a tag with photoshop.
I like to also implement the feature after you press the Add button when filtering by 'photoshop', the word photoshop gets placed under the input box with an 'x' button to close that particular filter. Is that done using jquery as well?
Any help on this would be great, Thank you.
Here is the code for my page I'm currently working on and would like to implement the above example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Checkbox Filter Test</title>
<style type="text/css">
@import url(css/screen.css);
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input.type_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('type_hidden');
$("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('type_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});
$("input.start_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('start_hidden');
$("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('start_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});
$("input.color_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('color_hidden');
$("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('color_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});
});
</script>
</head>
<body>
<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>
EDIT:
Below is the new input field that I have added to the page. I'd like to know how to type something in the input box like 'Kobe' and press the add link/button,then it only displays items with the word 'Kobe' in it using jquery. I don't need the autocomplete at this time. I have no clue on how to do the jquery for this.
<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>
<ul id="existingtags" class="keywords"> </ul>
</li>
</ul>
In addition, when 'Kobe' is typed in the input I would like the type in input (Kobe) to display in the unordered list "existingtags" and clicking on it deletes the filter.(I hope that made sense)
Thank you for any help.