jquery.fullsearch.js一款基于Bootstrap的單頁面文字搜索jQuery插件。通過搜索關(guān)鍵字，插件會在下拉列表中高亮列出關(guān)鍵字和所在的各個段落，用戶點擊相應(yīng)的搜索下拉列表項即可跳轉(zhuǎn)到相應(yīng)的地方。

jquery.fullsearch.js使用方法

使用該文字搜索插件需要在頁面中引入Bootstrap相關(guān)文件，以及jQuery和jquery.full-search.js文件，為了實現(xiàn)瞄點跳轉(zhuǎn)，還需要引入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結(jié)構(gòu)

創(chuàng)建一個<input>元素用于制作搜索框。

<input type="search" id="search" placeholder="請輸入本頁面內(nèi)容">

然后創(chuàng)建一個搜索列表的HTML模板。

<div > <h4>標題</h4> <ul >  <li><a href="">dsfsdfsdf</a></li>  <li><a href="">sdfsdf</a></li>  </ul> <h4>內(nèi)容</h4> <ul >  <li><a href="">sdfsdf</a></li>  <li><a href="">sdfsd</a></li> </ul></div>

最后將你需要進行搜索的內(nèi)容放入一個帶唯一ID號的容器中

<div id="result-list"> <!-- 可對以下內(nèi)容中的文字進行搜索 --> <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: "沒有找到相關(guān)數(shù)據(jù)"});

jquery.fullsearch.js配置參數(shù)

highlight：是否高亮搜索關(guān)鍵字。

search_data：搜索結(jié)果存放的容器的class類。

search_title：搜索的標題容器。

search_content：搜索的結(jié)果容器。

list：要進行搜索的容器。

更多js,jq文字搜索功能文章請查看下面的相關(guān)文章