Question

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

Teachers

上面是一个包含很多教师的水平滚动条。滚动条中的每个教师都包含在一个名为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相同的结构。

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

Search

我想通过使用JQuery将staff-container与搜索词不匹配的所有display:none;与<span class="bold">teacher</span>一起隐藏。

我希望搜索只查找教师姓名。换句话说，搜索时只应查找每个staff-container中的<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>。

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

搜索HTML：

{{1}}

这是一个非常简单的fiddle

查看我要添加搜索的webpage 。 它还没有搜索。

我很抱歉，如果我问的问题太大了，我只需要帮助，因为我从来没有在jquery中搜索过。

已修改以删除downvote

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 [{1}}中创建一个名为staff-container的地址。例如

teacher

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

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

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.搜索框上的按键事件监听器，如果它与这些容器中的任何名称匹配，将检查每个按键上的值（匹配可能是有限的，需要测试它并查看它是如何进行的）。 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

除了我搜索的div之外，JQuery隐藏所有div

6 个答案: