Javascript搜索栏仅搜索标题

斯坦·范·赫特姆

如何仅在b标签上而不在整个div上搜索。现在我可以搜索整个div,但是我只希望能够搜索b标签中的标题。并且如果列表中有一个名称,则必须将其删除HTML:

<div class="row">
    <div class="col-md-3">
    <div class="panel panel-default" id="list">
        <div class="panel-header">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for users" id="searchName"/>
                <div class="input-group-btn">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary">
                            <span class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body" id="user1">
            <div class="row">
                <div class="col-md-4">
                    <img src="" class="img-thumbnail">
                </div>
                <div class="col-md-8">
                    <b>Pieter</b><br>
                    (Laatste bericht)<br>
                    <i>12:01</i>
                </div>
            </div>
        </div>
        <div class="panel-body" id="user2">
            <div class="row">
                <div class="col-md-4">
                    <img src="" class="img-thumbnail">
                </div>
                <div class="col-md-8">
                    <b>Karel</b><br>
                    (Laatste bericht)<br>
                    <i>11:15</i>
                </div>
            </div>
        </div>
        <div class="panel-body" id="user3">
            <div class="row">
                <div class="col-md-4">
                    <img src="" class="img-thumbnail">
                </div>
                <div class="col-md-8">
                    <b>Pilot</b><br>
                    (Laatste bericht)<br>
                    <i>9:36</i>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript:

function contains(text_one, text_two){
    if (text_one.indexOf(text_two) != -1){
        return true;
    }
}

$("#searchName").keyup(function () {
    var searchName = $("#searchName").val().toLowerCase();
    $(".panel-body").each(function () {
        if(!contains($(this).text().toLowerCase(), searchName)) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});
奥菲尔·巴鲁克(Ofir Baruch)

find()在此条件下使用,以专注于元素的子B标签:

前:

if(!contains($(this).text().toLowerCase(), searchName)) {

后:

if(!contains($(this).find('b').text().toLowerCase(), searchName)) {

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章