Question

我正在尝试构建一个模仿实时搜索的页面 - 搜索结果显示为用户类型。下面的插件运行良好，除了我想在开头隐藏结果（有序列表）并显示每个匹配的子弹作为用户类型。

http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-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);
});

}）;

HTML

<form id="live-search" action="" class="styled" method="post">
   <fieldset>
       <input type="text" class="text-input" id="filter" value="" />
   </fieldset>
</form>

<ol class="commentlist">
   <li>Comment #1</li>
   <li>Comment #2</li>
</ol>

任何帮助表示赞赏。

Answer 1

如果评论是预先加载的，您最初可以通过两种方式隐藏它。

在dom上调用$（'。commentlist li'）。hide（）
添加样式.commentlist li { display: none}

我建议的另一个小调整是在循环语句之外创建一个正则表达式变量

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

演示：Fiddle

显然，您可以使用fadeIn('slow')和fadeOut('slow')等动画代替show()和hide()动画显示项目。我认为它看起来很好项目将一起动画。

Answer 2

在CSS中添加

.commentlist li{display:none;}

然后在你的js中，第一个if

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

然后在最后，而不是$（this）.show（）添加$（this）.fadeIn（'slow'）

$(this).fadeIn('slow');

您在此处的更新代码：http://tinyurl.com/a972s6t

Answer 3

这应该适合你：

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

演示中的脚本演示：http://www.glow-raspberry.com/where-to-buy。例如输入“plaza”。

在jQuery中实时搜索

3 个答案: