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

コメントがプリロードされている場合は、最初に2つの方法でコメントを非表示にできます。

  1. dom readyで$（'。commentlistli'）。hide（）を呼び出します

  2. スタイルを追加する.commentlist li { display: none}

私が提案するもう1つの小さな調整は、ループステートメントの外側に正規表現変数を作成することです。

$(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')。多くのアイテムが一緒にアニメーション化されるので、見栄えが良いと思います。fadeOut('slow')show()hide()

于 2013-02-27T03:08:33.167 に答える
2

CSSに追加

.commentlist li{display:none;}

次に、あなたのjsで、最初の場合

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 。たとえば、「plaza」と入力します。

于 2013-02-27T03:13:25.263 に答える