2

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

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>

任何帮助表示赞赏。

4

3 回答 3

7

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

  1. 在 dom 就绪时调用 $('.commentlist li').hide()

  2. 添加样式.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);
    });
});

演示：小提琴

您显然可以使用像fadeIn('slow')and之类的动画fadeOut('slow')来代替show()andhide()来为项目的显示设置动画，在我看来它看起来不错，因为许多项目将一起制作动画。

于 2013-02-27T03:08:33.167 回答
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

于 2013-02-27T03:08:23.357 回答
0

这应该为你做：

$(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 。例如输入“广场”。

于 2013-02-27T03:13:25.263 回答