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


Posted in jQuery onFebruary 04, 2020

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="https://www.jq22.com/jquery/jquery-1.10.2.js"></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文字搜索功能文章请查看下面的相关文章

jQuery 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
9种方法优化jQuery代码详解
Feb 04 #jQuery
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
You might like
php中的数组操作函数整理
2008/08/18 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
React Native之TextInput组件解析示例
2017/08/22 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
详解如何减少python内存的消耗
2019/08/09 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
设计师求职信模板
2014/05/06 职场文书
节约用水演讲稿
2014/05/21 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers