做項(xiàng)目的時(shí)候有這么一個(gè)需求，客戶信息顯示出來(lái)后我要搜索查找相關(guān)的客戶，并把相關(guān)的客戶信息全部顯示出來(lái)，因?yàn)橐粋€(gè)客戶全部信息我寫在一個(gè)div里面 所以顯示的時(shí)候就是顯示整個(gè)div。先看看實(shí)現(xiàn)的效果：
當(dāng)我輸入瓦窯村 就把相關(guān)帶瓦窯的客戶信息顯示出來(lái)并把瓦窯村字體設(shè)置紅色， 其他的就不顯示；下面看html代碼：
<body> <div class="bar bar-header-secondary" style="top:0"> <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" style="top:2.2em"> <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顯示出來(lái)$(".card").hide().filter(":contains('"+txt+"')").show(); card就是整個(gè)包含客戶信息的div；
3、大家都知道這樣改變了原來(lái)div的結(jié)構(gòu)，里面春文本的變成了這樣如果第二次輸入的時(shí)候不把整個(gè)div恢復(fù)到加載頁(yè)面的時(shí)候搜索就會(huì)出bug
明顯多了兩個(gè)b標(biāo)簽 如果不遍歷移除b標(biāo)簽我搜瓦窯村在搜村委會(huì)就這樣
就不會(huì)顯示紅色了；
4、個(gè)人學(xué)到的關(guān)鍵技術(shù)：移除標(biāo)簽，替換全部相關(guān)到的文本replace方法，顯示需要的div（過濾）filter方法！
總結(jié)：其中遇到的問題不止這些還有很多的，上網(wǎng)查了很多資料，紙上得來(lái)終覺淺，總是一次一次不同想法不同思路解決不同bug出來(lái)的；這很基礎(chǔ)，只要有想法有思路就去做，不會(huì)的百度，一個(gè)點(diǎn)一個(gè)點(diǎn)的來(lái)。日積月累的慢慢前進(jìn)吧！
總結(jié)
以上所述是小編給大家介紹的前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來(lái)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
