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

 更新时间:2020年02月04日 16:51:23   投稿:WDC  
jquery.fullsearch.js是一款基于Bootstrap文字搜索插件,可以帮助您快速搜索到当前页面所包含的指定文字,并定位到所在位置

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

相关文章

  • 用JS创建一个录屏功能

    用JS创建一个录屏功能

    这篇文章主要介绍了利用JS创建一个录屏功能,创建这个功能钱我们首先创建一个HTML文件,包含记录按钮和一个播放标签,下面来看看创建的详细过程
    2021-11-11
  • 5个实用的JavaScript新特性

    5个实用的JavaScript新特性

    这篇文章主要为大家介绍了5个实用的JavaScript新特性,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • JavaScript编程通过Matlab质心算法定位学习

    JavaScript编程通过Matlab质心算法定位学习

    这篇文章主要为大家介绍了JavaScript编程中通过Matlab质心算法来定位的算法学习,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-10-10
  • 微信小程序 保留小数(toFixed)详细介绍

    微信小程序 保留小数(toFixed)详细介绍

    这篇文章主要介绍了 微信小程序 保留小数(toFixed)详细介绍的相关资料,这里附有实例,帮助大家学习参考此部分知识,需要的朋友可以参考下
    2016-11-11
  • JavaScript对象(详细)

    JavaScript对象(详细)

    这篇文章主要介绍了Java中的Script对象的相关资料,需要的朋友可以参考下文章里内容
    2021-08-08
  • fs-extra实现yarn create tlist创建示例详解

    fs-extra实现yarn create tlist创建示例详解

    这篇文章主要为大家介绍了fs-extra实现yarn create tlist创建示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JSON stringify及parse方法实现数据深拷贝

    JSON stringify及parse方法实现数据深拷贝

    这篇文章主要为大家介绍了JSON.stringify递归及JSON.parse有限状态自动机实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • webpack5之devServer的常用配置详解

    webpack5之devServer的常用配置详解

    这篇文章主要为大家介绍了webpack5之devServer的常用配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • JavaScript内置对象介绍

    JavaScript内置对象介绍

    这篇文章主要介绍了JavaScript内置对象,内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能,下面我们一起进入文章了解更多详细内容
    2021-12-12
  • arrify 转数组实现示例源码解析

    arrify 转数组实现示例源码解析

    这篇文章主要为大家介绍了arrify 转数组实现示例源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论