如何在 div 上执行 jQuery 实时过滤器而不是列出项目？

Question

我认为我正在寻找的功能称为“实时过滤器”，我正在尝试过滤输出的数据库条目，其中每个条目具有以下结构：

<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。

这是我遇到的解决方案的默认行为（主要是here），但它们似乎只适用于列表项而不适用于 div。例如，我尝试了here的代码并将其修改为：

<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>

它搜索正确，但它用.class1 隐藏了所有的div。

有谁知道如何使用实时过滤器在.class4 h4 中搜索特定文本，然后用.class1 淡出不包含搜索文本的div？

谢谢。

Answer 1

使用onkeypress

例如：

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

然后你可以在调用函数中实现淡出逻辑。

调用函数应该是这样的：

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

并且该功能不需要在文档就绪方法中

Answer 2

正如我告诉你的，我带着现场演示回来了。代码如下：

***只要确保包含 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>

Answer 3

这个问题有你想要的答案：jQuery - Trying to filter divs on keyup

刚刚在我自己的网站上使用过，效果很好。