JQuery 隐藏除我搜索的 div 之外的所有 div [关闭]

Posted 2023-02-23

【中文标题】JQuery 隐藏除我搜索的 div 之外的所有 div [关闭]

【英文标题】：JQuery hide all divs except for the divs I search for [closed]

【发布时间】：2013-06-03 21:39:03

【问题描述】：

我想为用户创建一个搜索输入，以便快速找到我学校的老师。

上面是一个水平滚动条，里面有很多老师。滚动条中的每个教师都被包裹在一个名为 staff-container 的单独 div 中。

<div class="staff-container">
    <div class="staff">
        <div class="staff-picture">
            <img src="img/people/teachers/aiello.png"  />
        </div>
        <p><span class="bold">Mrs. Aiello</span><br />
        Ext. 13328<br />
        Room 328/323<br />
        <a href="mailto:[e-mail]">[e-mail]</a></p>
    </div>
</div>

以上是艾哈迈德先生的staff-container。每个教师的 html 结构都完全相同。

当我在搜索中输入老师的姓名并单击搜索按钮时，我希望发生以下情况。

我希望使用 JQuery 将所有与搜索词不匹配的 staff-container 隐藏在 display:none; 中。

我希望搜索只查找教师姓名。换句话说，搜索应该只查找每个staff-container 中的<span class="bold">teacher</span>。

如果没有教师与搜索词匹配，我希望显示所有教师。如果没有搜索任何内容，我希望显示所有教师。

搜索 HTML：

<div class="search-container">
    <form class="form-search form-inline">
        <input type="text" class="input-medium search-query" placeholder="Search">
        <button type="submit" class="btn">Search</button>
    </form>
</div>

这是一个非常简单的fiddle

查看webpage我正在添加搜索。 它还没有搜索。

对不起，如果我问的问题太大了，我只是需要帮助，因为我从未在 jquery 中进行过搜索。

已编辑以删除反对票

【问题讨论】：

@roasted 实际上只是为了上学。我在上网页设计课。

您是否有权访问 sql 查询？

一个想法-使用老师的名字作为班级名称，并在按键时过滤掉班级名称。

如果有人输入“a”并搜索会发生什么？他们应该得到所有名字中包含“a”的老师吗？

（如果这些是真实的电子邮件地址，最好为 Fiddle 制作假的，以避免它们被垃圾邮件。）

【参考方案1】：

检查 jsfiddle：

http://jsfiddle.net/XjgR2/

$('.form-search').on('submit',function()return false;);
$('.form-search .btn').on('click', function(e)
    var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
    $('div.staff-container .bold').each(function()
         var $this = $(this);
         if($this.text().toLowerCase().indexOf(query) === -1)
             $this.closest('div.staff-container').fadeOut();
        else $this.closest('div.staff-container').fadeIn();
    );
);

【讨论】：

你太棒了。非常感谢！！！

借助您的代码查看网站：] wcs.k12.mi.us/wmhs/Staff/index.html

Here 类似，更多示例和效果，只是google jquery live text search希望对某人有所帮助。

如果您希望在键入时完成搜索，请使用：$('.search-query').keyup(function(e) var query = $.trim($('.search-query').val()).toLowerCase(); $('#site-list .text-primary').each(function() var $this = $(this); if($this.text().toLowerCase().indexOf(query) === -1) $this.closest('div.thumb-site').fadeOut(); else $this.closest('div.thumb-site').fadeIn(); ); );

【参考方案2】：

这是您可以使用 css3 选择器执行的操作。在您的 div staff-container 中创建一个名为 teacher 的属性。例如

<div class='staff-container' teacher='John Dow'>.....</div>

然后在你的 jquery 中使用下面的 css3 选择器

var searchval = $('.search-query').val()
$("div[teacher*=" + searchval + "]").show();

【讨论】：

最好使用有效属性作为数据：data-teacher=""

【参考方案3】：

你考虑过 Angularjs 吗？它为这些问题提供了非常简单的解决方案：http://docs.angularjs.org/api/ng.filter:filter

编辑 如果你想要纯 jquery 的东西，也许看看这样的东西：http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

【参考方案4】：

如果你想让其他人消失，这意味着代码应该执行以下操作： 1. 搜索框上的Keypress 事件监听器，它会检查每次按键时的值是否与这些容器中的任何名称匹配（匹配可能会受到限制，需要对此进行测试并查看结果如何）。 2.在搜索框中键入的名称和包含名称的跨度成功匹配后，顺便说一下，应该相应地命名，这样你就可以在JS代码中解决它，代码应该遍历所有其他父级这些“命名”跨度的 div 并将它们设置为隐藏，匹配的除外（它应该排除它，这意味着和 IF 语句和 for 或等效循环）。

让我知道这是否有帮助。

PS.: 不错的网站，我只会提高照片的质量并将它们的背景修复为更中性的背景，比如白色或白色烟雾，不知道哪种效果最好。

GL

【参考方案5】：

http://jsfiddle.net/5UUM7/

使用 jquery：

$('#search').on('change', function(e)
    var q = e.target.value;
    $('div.staff-container').each(function()
        var name = this.children[0].children[1].children[0].textContent;
        if(name.search(q) < 0) $(this).hide();
    );
);

HTML：

Search: <input type="text" id="search"></input>
<div class="staff-container"> ... </div>
<div class="staff-container"> ... </div>

【讨论】：

关于改变也需要改变焦点。如果您键入，结果与您键入时一样；-)

【参考方案6】：

你可以这样做（区分大小写）：

$(".btn").click(function()
    var show=$(".staff-container .bold:contains('"+$(".search-query").val()+"')").parents(".staff-container");
    show.css("display","block");
    $(".staff-container").not(show).css("display","none");
);     

http://jsfiddle.net/KqFMh/1/ 您可以添加一些类而不是 .bold 作为名称和一些 id 而不是 .search-query