插件描述：jquery.fullsearch.js是一款基于Bootstrap文字搜索插件，可以帮助您快速搜索到当前页面所包含的指定文字，并定位到所在位置。
更新时间：2019-08-15 22:59:23
一款基于Bootstrap的单页面文字搜索jQuery插件。通过搜索关键字，插件会在下拉列表中高亮列出关键字和所在的各个段落，用户点击相应的搜索下拉列表项即可跳转到相应的地方。
使用方法
使用该文字搜索插件需要在页面中引入Bootstrap相关文件，以及jQuery和jquery.full-search.js文件，为了实现瞄点跳转，还需要引入anchor.js文件。
1 2 3 4 5 | <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"><link href="css/jumbotron-narrow.css" rel="stylesheet"><script type="text/javascript" src="js/anchor.js"></script> <script type="text/javascript" src="js/jquery.full-search.js"></script> |
HTML结构
创建一个<input>元素用于制作搜索框。
1 | <input type="search" id="search" placeholder="请输入本页面内容"> |
然后创建一个搜索列表的HTML模板。
1 2 3 4 5 6 7 8 9 10 11 12 | <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号的容器中
1 2 3 4 5 6 7 8 | <div id="result-list"> <!-- 可对以下内容中的文字进行搜索 --> <h4 id="a">Lorem ipsum dolor sit amet</h4> ...... <h4 id="b">Morbi fermentum</h4> ...... ...</div> |
初始化插件
在页面DOM元素加载完毕之后，可以通过fullsearch()方法来初始化该文字搜索插件。
1 2 3 4 5 6 7 8 | $('#search').fullsearch({ highlight: true, search_data: ".search-result", search_title: ".result-section", search_content: ".result-content", list: "#result-list", nodata: "没有找到相关数据"}); |
配置参数
highlight：是否高亮搜索关键字。
search_data：搜索结果存放的容器的class类。
search_title：搜索的标题容器。
search_content：搜索的结果容器。
list：要进行搜索的容器。
nodata：没有找到结果时的提示文本。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 点击产生波浪效果的插件waves.js
- 下一个特效： 超简洁清爽的jQuery单页个人网站模板