Building a quick search box with JQuery

Question

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?

score 7 · Accepted Answer · answered May 21 '12 at 13:21

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

score 0 · Answer 2 · answered May 21 '12 at 13:22

there is no text property for li. you can get the text() property insted.
insted of:

$('#comboBoxData li').hide();
$('#comboBoxData li[text*=' + search + ']').show();

try

$('#comboBoxData li').each(function(){
   if ( ($this).text().indexOf(search) > -1 ) $(this).show(); 
   else $(this).hide();
});

score 0 · Answer 3 · edited May 21 '12 at 13:26

0

To find the element which contains the value from the checkbox, you have to loop through each element and use the .text() function to get the text-content of the tag:

$('#comboBoxData li').each(function() {
    if ($(this).text().indexOf(search) != -1) {
        $(this).show();
    }
});

edited May 21 '12 at 13:26

Rory McCrossan

331,213
40
305
339

answered May 21 '12 at 13:25

Stefan Fandler

1,141
7
13

Thulasiram · Answer 4 · 2012-05-21T13:42:43.660

0

 $(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();
        });
    });

for live demo see this link: http://jsfiddle.net/nanoquantumtech/B7NxP/

edited May 21 '12 at 13:42

answered May 21 '12 at 13:37

Thulasiram

8,432
8
46
54

how to remove casesensitvity if we have text inside ....? – Taqi Raza Khan Oct 31 '20 at 11:18

Building a quick search box with JQuery

4 Answers4