jQuery单页面文字搜插件jquery.fullsearch.js

所属分类:输入-自动完成,搜索

 7779  114  查看评论 (0)
分享到微信朋友圈
X
jQuery单页面文字搜插件jquery.fullsearch.js ie兼容8

更新时间:2019-08-15 22:59:23

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

使用方法

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

<link href="css/bootstrap.min.css"  type="text/css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" 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>

初始化插件

在页面DOM元素加载完毕之后,可以通过fullsearch()方法来初始化该文字搜索插件。

$('#search').fullsearch({
    highlight: true,
    search_data: ".search-result",
    search_title: ".result-section",
    search_content: ".result-content",
    list: "#result-list",
    nodata: "没有找到相关数据"
});

配置参数

  • highlight:是否高亮搜索关键字。

  • search_data:搜索结果存放的容器的class类。

  • search_title:搜索的标题容器。

  • search_content:搜索的结果容器。

  • list:要进行搜索的容器。

  • nodata:没有找到结果时的提示文本。

相关插件-自动完成,搜索

基于jQuery的分组(带组名输入联想和组数删减)

页面是源于一场王者荣耀大屏幕分组展示,带有组名输入的联想和组数删减
  自动完成
 11813  178

货币大写金额转换插件ChinaNumToEnglishNum.js

货币大写金额转换插件ChinaNumToEnglishNum.js在线将阿拉伯数字转换成中文大写、人民币大写转换工具
  自动完成
 21481  284

jQuery输入框数值加减调整插件

jQuery输入框数值加减调整0到100插件
  自动完成
 31199  240

jQuery IP地址输入插件

jQuery IP地址输入插件兼容ie6,代码注释全
  自动完成
 8245  131

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复