jquery - 在列表中过滤 Jquery 中的结果

Question

我从互联网上下载并编辑了一段代码，基本上我想做的是创建一个我使用 JSON 从数据库中读取的字符串列表。该列表构建得很完美，现在我想做的是使用 Jquery 过滤结果(文本框)。最好的方法是什么？当用户在文本框中键入内容时显示完整的结果列表，过滤列表中的这些结果。

谢谢

$(function ()
{
    $.ajax({
        url: 'api.php', data: "", dataType: 'json',  success: function(rows)
        {
            var list = $("#toggle").append('<ul></ul>').find('ul');
            for (var i in rows)
            {
            var row = rows[i];
                //var id = row[0];
                var Dname = row[4];
                Dname = Dname.toLowerCase();
                list.append("<li>"+Dname+"</li><div>Pulse</div>");
            }
            $('ul li:odd').addClass('zebra_odd');
            $('ul li:even').addClass('zebra_even');
            $("li").click(function(){
                $(this).toggleClass("active");
                $(this).next("div").stop('true','true').slideToggle();
            });
        }
    });
});

Answer 1

这非常有效:

$('input').keyup(function() {                       // Bind keyup event to textbox
    var textboxVal = $(this).val().toLowerCase();   // Get value of textbox
    $('ul li').each(function() {                    // loop through the list
        var listVal = $(this).text().toLowerCase(); // get value of the <li>
        if(listVal.indexOf(textboxVal) >= 0) {      // search if textboxVal is in listVal
            $(this).show();                         // if true show this <li>
        } else {
            $(this).hide();                         // else hide this <li>
        }
    });
});

示例:http://jsfiddle.net/PWAXt/