使用JQuery构建快速搜索框

Question

我有以下标记:

<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>

使用以下JQuery代码:

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

当我在'comboBox'搜索字段中输入'1'或'12'等文本时,它应该过滤掉其文本中不包含我的搜索数据的所有LI,但由于某种原因它没有显示任何内容.为什么？

Answer 1

你的例子不起作用,因为文本不是一个属性li.

尝试使用filter()搜索文本:

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

示例小提琴