jQuery单页面文字搜索插件jquery.fullsearch.js的使用方

jquery.fullsearch.js一款基于Bootstrap的单页面文字搜索jQuery插件。通过搜索关键字,插件会在下拉列表中高亮列出关键字和所在的各个段落,用户点击相应的搜索下拉列表项即可跳转到相应的地方。

jquery.fullsearch.js使用方法

使用该文字搜索插件需要在页面中引入Bootstrap相关文件,以及jQuery和jquery.full-search.js文件,为了实现瞄点跳转,还需要引入anchor.js文件。

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

HTML结构

创建一个<input>元素用于制作搜索框。

<input type="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> <!-- 可对以下内容中的文字进行搜索 --> <h4>Lorem ipsum dolor sit amet</h4> ...... <h4>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:要进行搜索的容器。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/caa915498367361a6ede7299f96c0454.html