Building a quick search box with JQuery
Building a quick search box with JQuery
HTML
<input type="text" id="comboBox" />
<ul id="comboBoxData">
<li>1</li>
<li>12</li>
<li>123</li>
<li>1234</li>
<li>12345</li>
<li>123456</li>
<li>1234567</li>
<li>12345678</li>
</ul>
CSS
input{
background: red;
}
JavaScript
$(document).ready(function () {
$("#comboBoxData li").hide();
$('#comboBoxData li').each(function (i) {
$(this).attr('data-text', function () {
return $(this).text();
});
});
$('#comboBox').bind('change keypress keyup change', function () {
$("#comboBoxData li").hide();
$('#comboBoxData li[data-text*="' + $.trim($(this).val()) + '"]').show();
});
});