Search and filter checkboxes options with jQuery
HTML structure:
<div id="options">
<input type="checkbox" id="64"><label class="option" for="64">Option1</label>
<input type="checkbox" id="64"><label class="option" for="64">Option2</label>
...
</div>
The javascript:
<script type="text/javascript">
(function ($) {
$(document).ready(function(){
// Options search field
$('#options').before(
'<input id="search" style="display: inline; width:180px;" type="text" />'
+'<span><a href="" onclick="return false;" id="search-clear">X</a></span>'
);
$('#search').keyup(function(){
var valThis = $(this).val().toLowerCase();
$('input[type=checkbox]').each(function(){
var text = $("label[for='"+$(this).attr('id')+"']").text().toLowerCase();
(text.indexOf(valThis) == 0) ? $(this).parent().show() : $(this).parent().hide();
});
});
// Search clear button
$("#search-clear").click(function(){
$("#search").val("");
$('input[type=checkbox]').each(function(){
$(this).parent().show();
});
});
});
})(jQuery);
</script>
Demo: