[JavaScript知识库]jQuery实现列表搜索

hrml

  <div style="background-color: #F6F6F6;height: 40rem;padding: 3rem 10%;">

                <div style="float: left;width: 22rem;">
                    <h3>运营中心</h3>
                    <div style="height: 2.2rem;margin-bottom: 0.5rem;background-color: #fff;">
                        <input type="text" style="padding:  10px 1em ; width: 18rem;" id="search" name="search"
                            class="search_input">
                        <span>
                            <img src="./images/search-1.svg"
                                style="float: right;margin-top: 0.6em;z-index: 6;margin-right: 1em;">
                        </span>
                    </div>
                    <div class="search_boxdiv">
                        <ul>
                            <li>
                                <h4 class="index-p search_title">汉尔姆总部</h4>
                                <p class="index-p">地址：浙江省杭州市余杭经济技术开发区新纺路5号 </p>
                                <p class="index-p">联系电话：4008-796-766 </p>
                                <p class="index-p">邮箱地址： marketing@halumm.com</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">广州运营中心</h4>
                                <p class="index-p">地址：广州市天河区珠江新城海乐路12号合景睿峰5楼506 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">深圳运营中心</h4>
                                <p class="index-p">地址：深圳市福田区深南西路天安数码时代大厦A座1302 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">长沙运营中心</h4>
                                <p class="index-p">地址：湖南省长沙市岳麓区麓云路与梅溪湖北路的交汇处东北梅溪湖创新中心28楼 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">珠海运营中心</h4>
                                <p class="index-p">地址：广东省珠海市香洲区红山路35-202号 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">郑州运营中心</h4>
                                <p class="index-p">地址：河南省郑州市金水区金水东路与东风南路交叉口绿地新都会8号楼5楼505室</p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">台州运营中心</h4>
                                <p class="index-p">地址：浙江省台州市椒江区开发区育德路333号 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">上海运营中心</h4>
                                <p class="index-p">地址：上海市嘉定区昌吉路156弄5号　</p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">南京运营中心</h4>
                                <p class="index-p">地址：江苏省南京市雨花台区宁双路19号云密城E棟四楼</p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">福州运营中心</h4>
                                <p class="index-p">地址：福建省福州市闽侯荆溪海峡国际家居建材市场一期北侧71-75号 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">温州运营中心</h4>
                                <p class="index-p">地址：浙江省温州市温州大道718号雅特大楼三层华派装饰</p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">武汉运营中心</h4>
                                <p class="index-p">地址：湖北省武汉市江夏区江夏大道邬树村11号</p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">天津运营中心</h4>
                                <p class="index-p">地址：天津市南开区迎水道浩天源9-2-602</p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">南通运营中心</h4>
                                <p class="index-p">地址：江苏省南通市工农北路58号鸿运装饰城B9幢126室 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                            <li>
                                <h4 class="index-p search_title">长春运营中心</h4>
                                <p class="index-p">地址：吉林省长春市二道区远达大街与惠工路交汇处长春东北亚国际采购中心B2座1单元21号房 </p>
                                <p class="index-p">联系电话： +86 4008 796 766</p>
                                <p class="search_bottom_line"></p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="float: left; margin-left: 25%;">
                    <img src="./images/contact_bg-10.png" style=" width: 371px;height: 563px;">
                </div>
            </div>

css

.search_boxdiv {
    overflow: auto;
    height: 25rem;
    line-height: 32px;
}

.search_bottom_line {
    border-bottom: 1px solid #ebe8e8;
}

js

   // 搜索
    $("#search").keyup(function () {
        var str = $(this).val();
        $('.search_boxdiv li').each(function (i, n) {
            if ($(n).text().indexOf(str) >= 0) {
                $(n).show();
            }
            else {
                $(n).hide();
            }
        });
    });