资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的龙陵网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

jquery.fullsearch.js使用方法

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



 
 

HTML结构

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

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

标题
内容

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

Lorem ipsum dolor sit amet
......
Morbi fermentum
...... ...

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


网页标题:jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
文章分享:http://www.cdkjz.cn/article/jdihps.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220