<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="/UploadFiles/2021-04-02/jquery-1.10.2.js">


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