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

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

不是获取整个item文本，而是获取要测试的第一个h5的文本

$('.searchable-container .text').filter(function() {
        return rex.test($(this).find('h5:first').text());
}).show();

使用jquery搜索单词

2 个答案: