您好,登錄后才能下訂單哦!
jquery.fullsearch.js一款基于Bootstrap的單頁(yè)面文字搜索jQuery插件。通過(guò)搜索關(guān)鍵字,插件會(huì)在下拉列表中高亮列出關(guān)鍵字和所在的各個(gè)段落,用戶點(diǎn)擊相應(yīng)的搜索下拉列表項(xiàng)即可跳轉(zhuǎn)到相應(yīng)的地方。
使用該文字搜索插件需要在頁(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>
創(chuàng)建一個(gè)<input>元素用于制作搜索框。
<input type="search" id="search" placeholder="請(qǐng)輸入本頁(yè)面內(nèi)容">
然后創(chuàng)建一個(gè)搜索列表的HTML模板。
<div > <h5>標(biāo)題</h5> <ul > <li><a href="">dsfsdfsdf</a></li> <li><a href="">sdfsdf</a></li> </ul> <h5>內(nèi)容</h5> <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)行搜索 --> <h5 id="a">Lorem ipsum dolor sit amet</h5> ...... <h5 id="b">Morbi fermentum</h5> ...... ... </div>
在頁(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: "沒(méi)有找到相關(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)文章
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。