jQuery中的实时搜索

我正在尝试构建一个模拟实时搜索的页面——搜索结果会随着用户的输入而显示。下面的插件运行良好，除了我想在开始时隐藏结果（有序列表），并在用户输入时显示每个匹配的项目符号

jQuery

$(document).ready(function(){
    $("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the comment list
        $(".commentlist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = "+count);
    });
});

$（文档）.ready（函数（）{
$（“#过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），count=0；
//循环浏览注释列表
$（“.commentlist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.fadeOut（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
//更新计数
var numberItems=计数；
$（“#过滤器计数”）.text（“注释数=”+count）；
});
});

HTML

评论#1
评论#2

感谢您的帮助。

在CSS中添加

.commentlist li{display:none;}

然后在js中，第一个if

if(filter == 0){$(this).fadeOut();}

最后，将$（this.show（）改为添加$（this.fadeIn（'slow'））

---

您在此处更新的代码：

如果注释已预加载，您可以通过两种方式将其隐藏

在dom就绪时调用$（'.commentlist'）.hide（）

添加样式

.commentlist li{display:none}

我建议的另一个小调整是在loop语句之外创建一个regex变量

$(document).ready(function(){
    $("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;
        if(!filter){ // hide is no text
            $(".commentlist li").hide();
            return;
        }

        var regex = new RegExp(filter, "i"); // Create a regex variable outside the loop statement

        // Loop through the comment list
        $(".commentlist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0) { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});

$（文档）.ready（函数（）{
$（“#过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），count=0；
如果（！filter）{//hide不是文本
$（“.commentlist li”）.hide（）；
返回；
}
var regex=new RegExp（filter，“i”）；//在循环语句外创建一个regex变量
//循环浏览注释列表
$（“.commentlist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
如果（$（this）.text（）.search（regex）<0）{//请在此处使用变量
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
//更新计数
var numberItems=计数；
$（“#过滤器计数”）.text（“注释数=”+count）；
});
});

演示：

---

显然，你可以使用像

fadeIn（'slow'）

和

fadeOut（'slow'）

这样的动画来代替

show（）

和

hide（）

来设置项目显示的动画，我认为这看起来很好，因为许多项目将一起设置动画。

这应该可以为你做到：

$(document).ready(function(){
    $('#filter').keyup(function() {
        var f = $(this).val();
        var regex = new RegExp(f, 'gi');

        $('.commentlist li').hide()
            .each(function() {
                if($(this).html().match(regex)) {
                    $(this).show();
                }
            });
    });
});

如果需要淡入淡出动画：

$(document).ready(function(){
    $('#filter').keyup(function() {
        var f = $(this).val();
        var regex = new RegExp(f, 'gi');

        $('.commentlist li').fadeOut()
            .each(function() {
                if($(this).html().match(regex)) {
                    $(this).stop().show();
                }
            });
    });
});

---

正在运行的脚本演示：。例如键入“plaza”。

评论是否已预加载？感谢您的回复。显示：none样式有效，但当清除文本框时，我想再次隐藏注释。我在此行中键入时得到并出错：var filter=$（this.val（），count=0，regex=new RegExp（filter，“I”）；此行：var filter=$（This.val（），count=0，regex=newregexp（filter，“i”）；谢谢你的帮助。这是可行的，但我想在清除文本字段时隐藏注释（li的）。

$(document).ready(function(){
    $('#filter').keyup(function() {
        var f = $(this).val();
        var regex = new RegExp(f, 'gi');

        $('.commentlist li').hide()
            .each(function() {
                if($(this).html().match(regex)) {
                    $(this).show();
                }
            });
    });
});

$(document).ready(function(){
    $('#filter').keyup(function() {
        var f = $(this).val();
        var regex = new RegExp(f, 'gi');

        $('.commentlist li').fadeOut()
            .each(function() {
                if($(this).html().match(regex)) {
                    $(this).stop().show();
                }
            });
    });
});