0

私が探している機能は「ライブフィルター」と呼ばれ、出力されたデータベースエントリをフィルター処理しようとしています。各エントリの構造は次のとおりです。

<div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
    <img src="path/to/image.jpg">
    <div class="class4">
        <h4>some text here</h4> <!-- this is what i want to search in -->
        <div class="class5">
            <span id="date">date: MM/DD/YY</span>
            <span id="id_one">text</span>
        </div>
        <div class="class6">
            <span id="id_two">text</span>
            <span id="id_three">text</span>
        </div>
        <span id="id_four">text</span>
        <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
    </div>
</div>

.class4 h4内を検索してから.class1、検索したテキストを含まないすべてのdivをフェードアウトしたいと考えています。

これは私が遭遇したソリューション（主にここ）のデフォルトの動作ですが、それらはリストアイテムでのみ機能し、divでは機能しないようです。たとえば、ここからコードを試し、次のように変更しました。

<script>
    $(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
            $(".class4 h4").each(function() {
                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(".class1").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("# of matches = "+count);
        });
    });
</script>

正しく検索されましたが、すべてのdivが。で非表示になりまし.class1た。

ライブフィルターを使用して特定のテキストを検索し、検索したテキストを含まない .class4 h4divをフェードアウトする方法を知っている人はいますか？.class1

ありがとうございました。

4

3 に答える 3

1

onkeypress を使用する

元：

 <input type="text" onkeypress=" return callfunction(event); "

callfunction では、フェードアウト ロジックを実装できます。

呼び出し関数は次のようになります。 

function callfunction(event){   
// Loop through the comment list
            $(".class4 h4").each(function() {
                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(".class1").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("# of matches = "+count);}          
}

そして、関数がドキュメントレディメソッドにある必要はありません

于 2012-11-30T11:00:51.160 に答える
1

私が言ったように、私はライブデモを持って戻ってきました. コードは次のとおりです。

***jquery スクリプトが含まれていることを確認してください。

<label>Type here</label>

<input type="text" id="filter" onkeyup=" return callfunction(); " />

<div>
    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>abcdef</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>some</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>dcdef</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>dcfffff</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>dssfafafsa</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>
<script type="text/javascript">
    function callfunction() {
        $(".class4 h4").each(function() {
            if ($(this).text().indexOf($("#filter").val()) != 0) {
                $(this).parent().parent().fadeOut(500);
            } else {
                $(this).parent().parent().fadeIn(500);
            }
        });
    }
</script>
于 2012-12-01T21:48:58.487 に答える
0

この質問には、あなたが探している答えがあります: jQuery - キーアップで div をフィルタリングしようとしています

自分のサイトで使用しただけで機能します。

于 2012-12-07T14:51:35.640 に答える