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 h4特定文本，然后淡出.class1不包含搜索文本的 div？

谢谢你。

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 - Trying to filter divs on keyup

刚刚在我自己的网站上使用它，它的工作原理。

于 2012-12-07T14:51:35.640 回答