jquery.fullsearch.js一款基於Bootstrap的單頁面文字搜尋jQuery外掛。通過搜尋關鍵字，外掛會在下拉列表中高亮列出關鍵字和所在的各個段落，使用者點選相應的搜尋下拉列表項即可跳轉到相應的地方。

jquery.fullsearch.js使用方法

使用該文字搜尋外掛需要在頁面中引入Bootstrap相關檔案，以及jQuery和jquery.full-search.js檔案，為了實現瞄點跳轉，還需要引入anchor.js檔案。

<link href="css/bootstrap.min.css" rel="external nofollow"  type="text/css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="external nofollow" rel="stylesheet">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="js/anchor.js"></script> 
<script type="text/javascript" src="js/jquery.full-search.js"></script>

HTML結構

建立一個<input>元素用於製作搜尋框。

<input type="search" id="search" placeholder="請輸入本頁面內容">

然後建立一個搜尋列表的HTML模板。

<div >
 <h4>標題</h4>
 <ul >
  <li><a href="">dsfsdfsdf</a></li>
  <li><a href="">sdfsdf</a></li> 
 </ul>
 <h4>內容</h4>
 <ul >
  <li><a href="">sdfsdf</a></li>
  <li><a href="">sdfsd</a></li>
 </ul>
</div>

最後將你需要進行搜尋的內容放入一個帶唯一ID號的容器中

<div id="result-list">
 <!-- 可對以下內容中的文字進行搜尋 -->
 <h4 id="a">Lorem ipsum dolor sit amet</h4>
 ......
 <h4 id="b">Morbi fermentum</h4>
 ......
 ...
</div>

jquery.fullsearch.js外掛初始化

在頁面DOM元素載入完畢之後，可以通過fullsearch()方法來初始化該文字搜尋外掛。

$('#search').fullsearch({
  highlight: true,search_data: ".search-result",search_title: ".result-section",search_content: ".result-content",list: "#result-list",nodata: "沒有找到相關資料"
});

jquery.fullsearch.js配置引數

highlight：是否高亮搜尋關鍵字。

search_data：搜尋結果存放的容器的class類。

search_title：搜尋的標題容器。

search_content：搜尋的結果容器。

list：要進行搜尋的容器。

更多js,jq文字搜尋功能文章請檢視下面的相關文章