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

Question

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

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

<div class="staff-container">
    <div class="staff">
        <div class="staff-picture">
            <img src="img/people/teachers/aiello.png" alt="" />
        </div>
        <p><span class="bold">Mrs. Aiello</span><br />
        Ext. 13328<br />
        Room 328/323<br />
        <a href="mailto:asusan@wcskids.net">asusan@wcskids.net</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 中进行过搜索。

已编辑以删除反对票

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

Answer 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();

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

Answer 4

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

让我知道这是否有帮助。

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

GL

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

Answer 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