前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來

做項(xiàng)目的時(shí)候有這么一個(gè)需求，客戶信息顯示出來后我要搜索查找相關(guān)的客戶，并把相關(guān)的客戶信息全部顯示出來，因?yàn)橐粋€(gè)客戶全部信息我寫在一個(gè)div里面所以顯示的時(shí)候就是顯示整個(gè)div。先看看實(shí)現(xiàn)的效果：

成都創(chuàng)新互聯(lián)公司專注骨干網(wǎng)絡(luò)服務(wù)器租用十年，服務(wù)更有保障！服務(wù)器租用，西部信息服務(wù)器租用成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

當(dāng)我輸入瓦窯村就把相關(guān)帶瓦窯的客戶信息顯示出來并把瓦窯村字體設(shè)置紅色，其他的就不顯示；下面看html代碼：

<body>
 <div class="bar bar-header-secondary" >
  <div class="searchbar">
   <a class="searchbar-cancel">取消</a>
   <div class="search-input">
    <label class="icon icon-search" for="search"></label>
    <input type="text" id="txtSearch" onChange="txtSearch()" placeholder="輸入關(guān)鍵字...">
   </div>
  </div>
 </div>
 <div class="content" id="divMain" >
  <div class="card">
   <div class="card-header"><div>富民青泉假有限公司</div> <span>530124210342</span></div>
   <div class="card-content">
    <div class="card-content-inner">
     客戶經(jīng)理:盧燕洲<br>
     負(fù)責(zé)人:張仕城 <a href="tel:13187876969" rel="external nofollow" >12345698711</a>
     <br>
     地址:富民縣東村鎮(zhèn)樂在村委會(huì)樂在村張仕城
     <br>
     客戶分檔:二檔
    </div>
   </div>
  </div>
　　　　后面有n個(gè)<div class="card">這里就不重復(fù)了
　　　　</div>
</body>

在我這里用的是onChange事件，這個(gè)根據(jù)個(gè)人的需要可以改；

 <style type="text/css">
  .changestyle{color:red;font-weight:600;}
 </style>
 <script type="text/javascript">
  function txtSearch()
  {
   //遍歷移除b標(biāo)簽，防止第二次搜索bug
   $(".changestyle").each(function()
   {
     var xx=$(this).html(); 
     $(this).replaceWith(xx);
    });
   //整個(gè)客戶信息div
   var str=$("#divMain").html();
   //文本輸入框
   var txt=$("#txtSearch").val();
   //不為空
   if($.trim(txt)!="")
   {
    //定義b標(biāo)簽樣式紅色加粗
    var re="<b class='changestyle'>"+txt+"</b>";
    //替換搜索相關(guān)的所有內(nèi)容
    var nn=str.replace( new RegExp(txt,"gm"),re);
    //賦值
    // document.getElementById("divMain").innerHTML=nn;
    $("#divMain").html(nn);
    //顯示搜索內(nèi)容相關(guān)的div
   $(".card").hide().filter(":contains('"+txt+"')").show(); 
   }
   else
   {
   $(".card").show();
   }
  }
 </script>

其實(shí)整體的思路是這樣的：

1、先把要搜索的內(nèi)容去html里面找，找到了就全部替換成<b class='changestyle'>"+搜索的內(nèi)容+"</b>；changestyle里面的樣式紅色，加粗

2、再把包含整個(gè)內(nèi)容的div顯示出來$(".card").hide().filter(":contains('"+txt+"')").show(); card就是整個(gè)包含客戶信息的div；

3、大家都知道這樣改變了原來div的結(jié)構(gòu)，里面春文本的變成了這樣如果第二次輸入的時(shí)候不把整個(gè)div恢復(fù)到加載頁面的時(shí)候搜索就會(huì)出bug

前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來

明顯多了兩個(gè)b標(biāo)簽如果不遍歷移除b標(biāo)簽我搜瓦窯村在搜村委會(huì)就這樣

前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來

就不會(huì)顯示紅色了；

4、個(gè)人學(xué)到的關(guān)鍵技術(shù)：移除標(biāo)簽，替換全部相關(guān)到的文本replace方法，顯示需要的div（過濾）filter方法！

總結(jié)：其中遇到的問題不止這些還有很多的，上網(wǎng)查了很多資料，紙上得來終覺淺，總是一次一次不同想法不同思路解決不同bug出來的；這很基礎(chǔ)，只要有想法有思路就去做，不會(huì)的百度，一個(gè)點(diǎn)一個(gè)點(diǎn)的來。日積月累的慢慢前進(jìn)吧！

總結(jié)

以上所述是小編給大家介紹的前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

當(dāng)前名稱：前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來
本文路徑：http://jinyejixie.com/article34/gcedse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站制作、域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來