好资源导航 » 文章资讯 » jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法

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

2023-08-02 04:17:04 74

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

jquery.fullsearch.js使用方法

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

HTML结构

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

然后创建一个搜索列表的HTML模板。


标题

dsfsdfsdf
sdfsdf

内容

sdfsdf
sdfsd

最后将你需要进行搜索的内容放入一个带唯一ID号的容器中



Loremipsumdolorsitamet
......
Morbifermentum
......
...

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文字搜索功能文章请查看下面的相关文章

返回顶部
514930285
czq8825@qq.com

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

jquery.fullsearch.js使用方法

HTML结构

标题

内容

jquery.fullsearch.js插件初始化

热门推荐

随机推荐