列表上Jquery中的筛选结果

我从互联网上下载并编辑了一段代码，基本上我想做的是创建一个字符串列表，我正在使用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();
            });
        }
    });
});

$（函数（）
{
$.ajax({
url:'api.php'，数据：'，数据类型：'json'，成功：函数（行）
{
变量列表=$（“#切换”）.append（“
”）.find（'ul'）；
用于（行中的变量i）
{
变量行=行[i]；
//变量id=行[0]；
var Dname=行[4]；
Dname=Dname.toLowerCase（）；
列表。追加（“
”+Dname+“
脉冲”）；
}
$（'ul li:odd'）.addClass（'zebra_odd'）；
$（'ul li:even'）.addClass（'zebra_even'）；
$（“li”）。单击（函数（）{
$（此）.toggleClass（“活动”）；
$（this）.next（“div”）.stop（'true'，'true'）.slideToggle（）；
});
}
});
});

这非常有效：

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

$（'input'）.keyup（函数（）{//Bind keyup事件到文本框
var textboxVal=$（this）.val（）.toLowerCase（）；//获取textbox的值
$（'ul li'）。每个（函数（）{//循环遍历列表
var listVal=$（this）.text（）.toLowerCase（）；//获取

if（listVal.indexOf（textboxVal）>=0）{//如果textboxVal在listVal中，则搜索
$（this）.show（）；//如果为true，则显示此

}否则{
$（this.hide（）；//否则隐藏此

}
});
});

---

示例：

这非常有效：

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

$（'input'）.keyup（函数（）{//Bind keyup事件到文本框
var textboxVal=$（this）.val（）.toLowerCase（）；//获取textbox的值
$（'ul li'）。每个（函数（）{//循环遍历列表
var listVal=$（this）.text（）.toLowerCase（）；//获取

if（listVal.indexOf（textboxVal）>=0）{//如果textboxVal在listVal中，则搜索
$（this）.show（）；//如果为true，则显示此

}否则{
$（this.hide（）；//否则隐藏此

}
});
});

示例：

您可以看一看，然后