jQuery實作搜尋功能並顯示搜尋相關內容-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作搜尋功能並顯示搜尋相關內容

小云云

May 23, 2018 pm 04:42 PM

jquery功能顯示

本文主要介紹了前端html中jQuery實現對文本的搜尋功能並把搜尋相關內容顯示出來,在專案中經常會遇到，今天小編把實例代碼分享給大家，需要的朋友可以參考下，希望能幫助大家。

做專案的時候有這麼一個需求，客戶資訊顯示出來後我要搜尋找相關的客戶，並把相關的客戶資訊全部顯示出來，因為一個客戶全部資訊我寫在一個p裡面所以顯示的時候就是顯示整個p。先看看實現的效果：

當我輸入瓦窯村就把相關帶瓦窯的客戶資訊顯示出來並把瓦窯村字體設定紅色，其他的就不顯示；下面看html代碼：

<body>
 <p class="bar bar-header-secondary" style="top:0">
  <p class="searchbar">
   <a class="searchbar-cancel">取消</a>
   <p class="search-input">
    <label class="icon icon-search" for="search"></label>
    <input type="text" id="txtSearch" onChange="txtSearch()" placeholder="输入关键字...">
   </p>
  </p>
 </p>
 <p class="content" id="pMain" style="top:2.2em">
  <p class="card">
   <p class="card-header"><p>富民青泉假有限公司</p> <span>530124210342</span></p>
   <p class="card-content">
    <p class="card-content-inner">
     客户经理:卢燕洲<br>
     负责人:张仕城 <a href="tel:13187876969" rel="external nofollow" >12345698711</a>
     <br>
     地址:富民县东村镇乐在村委会乐在村张仕城
     <br>
     客户分档:二档
    </p>
   </p>
  </p>
　　　　后面有n个<p class="card">这里就不重复了
　　　　</p>
</body>

在我這裡用的是onChange事件，這個根據個人的需要可以改；

 <style type="text/css">
  .changestyle{color:red;font-weight:600;}
 </style>
 <script type="text/javascript">
  function txtSearch()
  {
   //遍历移除b标签，防止第二次搜索bug
   $(".changestyle").each(function()
   {
     var xx=$(this).html(); 
     $(this).replaceWith(xx);
    });
   //整个客户信息p
   var str=$("#pMain").html();
   //文本输入框
   var txt=$("#txtSearch").val();
   //不为空
   if($.trim(txt)!="")
   {
    //定义b标签样式红色加粗
    var re="<b class=&#39;changestyle&#39;>"+txt+"</b>";
    //替换搜索相关的所有内容
    var nn=str.replace( new RegExp(txt,"gm"),re);
    //赋值
    // document.getElementById("pMain").innerHTML=nn;
    $("#pMain").html(nn);
    //显示搜索内容相关的p
   $(".card").hide().filter(":contains(&#39;"+txt+"&#39;)").show(); 
   }
   else
   {
   $(".card").show();
   }
  }
 </script>

其實整體的思路是這樣的：

1、先把要搜尋的內容去html裡面找，找到了就全部替換成"+搜尋的內容+"；changestyle裡面的樣式紅色，加粗

2、再把包含整個內容的p顯示出來$(".card").hide().filter(":contains ('"+txt+"')").show(); card就是整個包含客戶資訊的p；

3、大家都知道這樣改變了原來p的結構，裡面春季文本的變成了這樣如果第二次輸入的時候不把整個p恢復到載入頁面的時候搜尋就會出bug

#明顯多了兩個b標籤如果不遍歷移除b標籤我搜瓦窯村在搜村委會就這樣

就不會顯示紅色了；

4、個人學到的關鍵技術：移除標籤，取代全部相關的文字replace方法，顯示所需的p（過濾）filter方法！

總結：其中遇到的問題不只這些還有很多的，上網查了很多資料，紙上得來終覺淺，總是一次一次不同想法不同思路解決不同bug出來的；這很基礎，只要有想法有思路就去做，不會的百度，一個點一個點的來。日積月累的慢慢前進吧！

相關推薦：

JavaScript實作前端即時搜尋功能的程式碼分享（圖）

MySQL基礎教學10 —函數之全文搜尋功能

mysql 函數之全文搜尋功能

以上是jQuery實作搜尋功能並顯示搜尋相關內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。