快捷導(dǎo)航

jQuery單頁(yè)面文字搜索插件jquery.fullsearch.js的使用方法

更新時(shí)間：2020年02月04日 16:51:23 投稿：WDC

jquery.fullsearch.js是一款基于Bootstrap文字搜索插件，可以幫助您快速搜索到當(dāng)前頁(yè)面所包含的指定文字，并定位到所在位置

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

jquery.fullsearch.js使用方法

使用該文字搜索插件需要在頁(yè)面中引入Bootstrap相關(guān)文件，以及jQuery和jquery.full-search.js文件，為了實(shí)現(xiàn)瞄點(diǎ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)建一個(gè)<input>元素用于制作搜索框。

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

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

<div >
 <h4>標(biāo)題</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>

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

<div id="result-list">
 <!-- 可對(duì)以下內(nèi)容中的文字進(jìn)行搜索 -->
 <h4 id="a">Lorem ipsum dolor sit amet</h4>
 ......
 <h4 id="b">Morbi fermentum</h4>
 ......
 ...
</div>

jquery.fullsearch.js插件初始化

在頁(yè)面DOM元素加載完畢之后，可以通過(guò)fullsearch()方法來(lái)初始化該文字搜索插件。

$('#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：搜索的標(biāo)題容器。

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

list：要進(jìn)行搜索的容器。

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

您可能感興趣的文章:

相關(guān)文章

用JS創(chuàng)建一個(gè)錄屏功能
這篇文章主要介紹了利用JS創(chuàng)建一個(gè)錄屏功能，創(chuàng)建這個(gè)功能錢我們首先創(chuàng)建一個(gè)HTML文件，包含記錄按鈕和一個(gè)播放標(biāo)簽，下面來(lái)看看創(chuàng)建的詳細(xì)過(guò)程
2021-11-11
5個(gè)實(shí)用的JavaScript新特性
這篇文章主要為大家介紹了5個(gè)實(shí)用的JavaScript新特性，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
JavaScript編程通過(guò)Matlab質(zhì)心算法定位學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript編程中通過(guò)Matlab質(zhì)心算法來(lái)定位的算法學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2021-10-10
微信小程序保留小數(shù)(toFixed)詳細(xì)介紹
這篇文章主要介紹了微信小程序保留小數(shù)(toFixed)詳細(xì)介紹的相關(guān)資料,這里附有實(shí)例，幫助大家學(xué)習(xí)參考此部分知識(shí)，需要的朋友可以參考下
2016-11-11
JavaScript對(duì)象(詳細(xì))
這篇文章主要介紹了Java中的Script對(duì)象的相關(guān)資料,需要的朋友可以參考下文章里內(nèi)容
2021-08-08
fs-extra實(shí)現(xiàn)yarn?create?tlist創(chuàng)建示例詳解
這篇文章主要為大家介紹了fs-extra實(shí)現(xiàn)yarn?create?tlist創(chuàng)建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
JSON stringify及parse方法實(shí)現(xiàn)數(shù)據(jù)深拷貝
這篇文章主要為大家介紹了JSON.stringify遞歸及JSON.parse有限狀態(tài)自動(dòng)機(jī)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
webpack5之devServer的常用配置詳解
這篇文章主要為大家介紹了webpack5之devServer的常用配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
JavaScript內(nèi)置對(duì)象介紹
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象,內(nèi)置對(duì)象就是指?JS?語(yǔ)言自帶的一些對(duì)象，這些對(duì)象供開發(fā)者使用，并提供了一些常用的或是最基本而必要的功能,下面我們一起進(jìn)入文章了解更多詳細(xì)內(nèi)容
2021-12-12
arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析
這篇文章主要為大家介紹了arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12