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实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php 使用array函数实现分页
2015/02/13 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
tensorflow识别自己手写数字
2018/03/14 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python十进制转二进制的详解
2020/02/07 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
自我管理的活动方案
2014/08/25 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers