Building a quick search box with JQuery

combobox, javascript, jquery, quick-search

Solution

your example does not work because text is not an attribute of an `li`.

Try using `filter()` to search for the text instead:

$('#comboBox').bind('keydown keypress keyup change', function() {
    var search = this.value;
    var $li = $("#comboBoxData li").hide();
    $li.filter(function() {
        return $(this).text().indexOf(search) >= 0;
    }).show();
});

Example fiddle

Problem

I have the following markup: ``` <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> ``` with the following JQuery code: ``` $(document).ready(function() { $('#comboBox').bind('keydown keypress keyup change', function () { var search = $('#comboBox').val(); if (search !== '') { $('#comboBoxData li').hide(); $('#comboBoxData li[text*=' + search + ']').show(); } else { $('#comboBoxData li').show(); } }); }); ``` when I type text like '1' or '12' in the 'comboBox' search field it is supposed to filter out all the LI's whose text doesn't contain my search data however for some reason it is displaying nothing instead. Why?

Original source