9

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

教师

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

<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 中都有完全相同的结构。

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

搜索

我希望使用 JQuerystaff-container隐藏所有与搜索词不匹配的 ' 。display:none;

我希望搜索只查找教师姓名。换句话说，只有<span class="bold">teacher</span>in eachstaff-container应该被搜索查找。

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

搜索 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>

这是一个非常简单的小提琴

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

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

编辑删除downvote

4

6 回答 6

18

检查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();
    });
});
于 2013-06-07T15:17:02.593 回答
1

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

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

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

var searchval = $('.search-query').val()
$("div[teacher*=" + searchval + "]").show();
于 2013-06-07T14:35:13.390 回答
0

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>
于 2013-06-07T14:46:24.633 回答
0

Have you considered Angularjs? It provides pretty straightforward solutions to problems like these: http://docs.angularjs.org/api/ng.filter:filter

Edit If you want something in pure jquery, maybe look at something like this: http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

于 2013-06-07T14:33:38.317 回答
0

Well if you want others to disapear, that means that the code should do the following: 1.Keypress event listener on search box, which would check the value on each key press if it matches any name in those containers (matching could be limited, need to test this and see how it goes). 2.Upon successful match of the name typed in the search box and span containing name, which by the way should be named accordingly so you could address it in JS code, the code should iterate through all other parent divs of those 'named' spans and set them hidden, except for the matching one(it should exclude it, so that means and IF statement and for, or equivalent, loop).

Let me know if this will be helpful.

PS.: nice website, i would just increase the quality of the photos and fix the background in them to more neutral one, like white or whitesmoke, not sure what would work best.

GL

于 2013-06-07T14:39:09.487 回答
0

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

$(".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

于 2013-06-07T14:56:43.590 回答