如何正确使用jQuery单页面搜索插件jquery.fullsearch.js？

本文共计756个文字，预计阅读时间需要4分钟。

%E2%80%9CjQuery.fullsearch.js%E6%98%AF%E4%B8%80%E4%B8%AA%E5%9F%BA%E4%BA%8EBootstrap%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%96%87%E5%AD%97%E6%90%9C%E7%B4%A2jQuery%E6%8F%92%E4%BB%B6%E3%80%82%E6%90%9C%E7%B4%A2%E5%85%B3%E9%94%AE%E5%AD%97%E5%90%8E%EF%BC%8C%E6%8F%92%E4%BB%B6%E4%BC%9A%E5%9C%A8%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%E4%B8%AD%E9%AB%98%E4%BA%AE%E5%88%97%E5%87%BA%E5%85%B3%E9%94%AE%E5%AD%97%E5%92%8C%E6%89%80%E5%9C%A8%E7%9A%84%E6%AE%B5%E8%90%BD%EF%BC%8C%E7%94%A8%E6%88%B7%E5%8F%AF%E7%9B%B4%E6%8E%A5%E8%B7%B3%E8%BD%AC%E5%88%B0%E5%AF%B9%E5%BA%94%E7%9A%84%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2%E2%80%9D

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="img.558idc.com/uploadfile/allimg/210603/141I544P-0.jpg"></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文字搜索功能文章请查看下面的相关文章