使用jquery搜索单词

Search for a word using jquery

本文关键字：单词 搜索 jquery 使用      更新时间：2023-09-26

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

Code Edited:

. 示:
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>

与其获取整个item文本，不如获取第一个h5的文本来测试

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