javascript - 使用 jquery 搜索单词

Question

产品x有很多功能，我想制作一个搜索字段，以便用户可以轻松找到x的特定功能。 这就是我的想法(我从引导网页偶然发现了这段代码)。

<div class="container">
    <div class="row">
        <h2 class="text-primary title"><span class="glyphicon glyphicon-align-justify"></span>User list</h2>
        <div class="col-lg-12">
            <input type="search" class="form-control" id="input-search" placeholder="Search..." >
        </div>
        <div class="searchable-container">
            <div class="items col-xs-12 col-sm-6 col-md-6 col-lg-6 clearfix">
               <div class="info-block block-info clearfix">
                    <div class="square-box pull-left">
                        <span class="fa fa-user"></span>
                    </div>
                    <h5 class="text-success">Company Name</h5>
                    <h4>sms</h4>
                    <p>Title: Manager</p>
                    <span>Email: sample@company.com</span>
                </div>
            </div> 

        </div>
    </div>
</div>

脚本代码

<script>

jQuery(document).ready(function($){   
        $('#input-search').on('keyup', function() {
          var rex = new RegExp($(this).val(), 'i');
            $('.searchable-container .items').hide();
            $('.searchable-container .items').filter(function() {
                return rex.test($(this).text());
            }).show();
        });
    });
</script>

问题是该脚本在整个段落中搜索特定单词。我只想搜索标题。即，<h5 class="text-success">Company Name</h5>不是全部。我怎样才能做到这一点？我尝试了类似的方法，但没有成功

 jQuery(document).ready(function($){   
            $('#input-search').on('keyup', function() {
              var rex = new RegExp($(this).val(), 'i');
                $('.searchable-container .text').hide();
                $('.searchable-container .text').filter(function() {
                    return rex.test($(this).text());
                }).show();
            });
        });

Answer 1

代码编辑:

return rex.test($(this).find(".text-success").text());

演示:

jQuery(document).ready(function($){   
        $('#input-search').on('keyup', function() {
          var rex = new RegExp($(this).val(), 'i');
            $('.searchable-container .items').hide();
            $('.searchable-container .items').filter(function() {
                return rex.test($(this).find(".text-success").text());
            }).show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <h2 class="text-primary title"><span class="glyphicon glyphicon-align-justify"></span>User list</h2>
        <div class="col-lg-12">
            <input type="search" class="form-control" id="input-search" placeholder="Search..." >
        </div>
        <div class="searchable-container">
            <div class="items col-xs-12 col-sm-6 col-md-6 col-lg-6 clearfix">
               <div class="info-block block-info clearfix">
                    <div class="square-box pull-left">
                        <span class="fa fa-user"></span>
                    </div>
                    <h5 class="text-success">Company Name</h5>
                    <h4>sms</h4>
                    <p>Title: Manager</p>
                    <span>Email: sample@company.com</span>
                </div>
            </div> 
            
<div class="items col-xs-12 col-sm-6 col-md-6 col-lg-6 clearfix">
               <div class="info-block block-info clearfix">
                    <div class="square-box pull-left">
                        <span class="fa fa-user"></span>
                    </div>
                    <h5 class="text-success">Company Name 1</h5>
                    <h4>sms </h4>
                    <p>Title: Manager1</p>
                    <span>Email: sample1@company.com</span>
                </div>
            </div> 
        </div>
    </div>
</div>