Question

所以，我必须创建一个简单的搜索框。在我的右侧容器中，我创建了一个这样的搜索框：

<div id="searchContainer" class="cf sb">
    <div class="right magnifier"></div>
    <input class="right" type="text" id="searchBox" placeholder="search"/>
</div>

在主容器中，我有类newsItem的多个对象。

<div class="newsItem cf sb br">
    <div class="closeButton right"></div>
    <div class="titles left">
        <div class="Title"><h3>{{Title}}</h3></div>
        <div class="Subtitle"><h5>{{Subtitle}}</h5></div>
    </div>
    <br>
    <div class="imageContainer"><img src={{URI}} alt="" /></div>
    <div class="newsText"><p>{{Text}}</p></div>
</div>

现在，搜索框在输入其中的一些文本并单击放大镜图标后，应搜索主容器中每个对象的标题和内容，并删除那些没有搜索到的文本的对象。如果单击放大镜时搜索框为空，则应重新显示已删除的所有对象。我尝试过以下jQuery函数：

$("#searchContainer").on("click", "#searchContainer .magnifier", function()
{
    var text=$("#searchBox").val();
    var string=$(".newsItem .Title").text();
    var string2=$(".newsItem .newsText").text();
    var m=string2.search(text);

    if(text === "")
    {
        $(".newsItem").fadeIn();
    }
    else if(text.length !== string.length || string.indexOf(text) !== 0)
    {
        if(m<0)
        {
            $(".newsItem").fadeOut();
        }
    }
});

但点击放大镜后没有任何反应。因为我是一个完全的初学者，所以我可能使用了错误的选择器。任何使它成功的帮助都会非常感激。

Answer 1

首先，重命名字符串变量（当然是保留的）。

然后，你有$("#searchContainer").on("click", "#searchContainer .magnifier"...

尝试$("#searchContainer").on("click", ".magnifier"...

on方法的第二个参数是一个选择器，用于过滤主要目标的后代。我不认为#searchContainer .magnifier会匹配任何孩子......因为目标是#searchContainer

$("#searchContainer").on("click", ".magnifier", function()
{
    var text=$("#searchBox").val();
    $('.newsItem').each(function(){
        var $item = $(this);
        var searchtext = $('.Title', this).text() + " " + $('.newsText', this).text()
        var match = searchtext.search(text);
        if(match > -1 || text == ""){
            $item.fadeIn();
        } else {
            $item.fadeOut();
        }
    }
});

顺便说一下，搜索功能通常是用纯html实现的，带有表单和后端。

您的搜索输入应该是表单的一部分，实际搜索应该在服务器上或使用javascript在表单提交时完成。这样，在字段中按Enter键也会触发回调函数（如果你当然在那里放了一个提交按钮）。

这种功能的纯JS设计导致对“它如何运作”的错误理解。

jQuery实现了一个简单的搜索框功能

1 个答案: