当前位置：首页 > 网页特效 > 其他

基于Bootstrap的单页面文字搜索jQuery插件

分类：其他日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<link href="css/bootstrap.min.css"  type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/anchor.js"></script>
<script type="text/javascript" src="js/jquery.full-search.js"></script>    
```            
#####  HTML结构
你可以创建一个input元素用于制作搜索框。

```html
<input type="search" class="form-control" id="search" placeholder="请输入本页面内容">
```
然后创建一个搜索列表的HTML模板。

```html
<div class="search-result" style="display:none">
  <h4>标题</h4>
  <ul class="result-section">
    <li><a href="">dsfsdfsdf</a></li>
    <li><a href="">sdfsdf</a></li>
 
  </ul>
  <h4>内容</h4>
  <ul class="result-content">
    <li><a href="">sdfsdf</a></li>
    <li><a href="">sdfsd</a></li>
 
  </ul>
</div>            
```      
最后将你需要进行搜索的内容放入一个带唯一ID号的容器中。

```html
<div class="col-lg-12" id="result-list">
  
  <h4 id="a">Lorem ipsum dolor sit amet</h4>
  <p>......</p>
 
  <h4 id="b">Morbi fermentum</h4>
  <p>......</p>
 
  ...
  
</div>      
```            
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过fullsearch()方法来初始化该文字搜索插件。

```html
$('#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：没有找到结果时的提示文本。

web299.com

基于Bootstrap的单页面文字搜索jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果