hideseek -- 为你的网站添加动态搜索

前面的

在做小组项目中，有几个地方需要实现内容搜索功能，因为已有的内容已经显示在网页上了，我的任务是在这些条目中根据关键词找到需要的条目。因为不太熟悉js等等等，所以就找了一个好用的轮子–hideseek，这个插件可以实现好几种搜索风格，我选择的是随着用户输入就动态过滤条目并且高亮显示关键词的搜索方式，感兴趣的可以到github上关注这个项目并且查看在线demo，因为很好搜，所以链接就不放了。

使用方法

首先需要引入jquery以及hideseek以及一个配置文件，如下：

<!-- 实现搜索的3个必须引入的包 -->
<script type="text/javascript" src="sources/js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="sources/js/jquery.hideseek.min.js"></script>
<script type="text/javascript" src="sources/js/initializers.js"></script>

你可以在initializers.js里修改你的配置

在需要使用搜索的位置添加以下代码：

<input id="search-highlight" name="search-highlight" placeholder="在这里搜索内容" data-nodata="没有发现结果" type="text" data-list=".highlight_list" autocomplete="off">

其中，data-nodate的值在没有搜索结果时显示，data-list是搜索内容，在需要被搜索的内容上添加类，如下（注意需要和input中的data-list对应）：

<div class="vertical highlight_list">
balabala...
</div>

然后就可以简单的享受动态搜索的效果了

其他的

如果一个网页需要多个搜索框并且都使用高亮显示的搜索方式呢？

我的解决方法是打开initializers.js文件修改内容如下：

$('#search-highlight').hideseek({
highlight: true
});
$('#search-highlight1').hideseek({
highlight: true
});
$('#search-highlight2').hideseek({
highlight: true
});
$('#search-highlight3').hideseek({
highlight: true
});
$('#search-highlight4').hideseek({
highlight: true
});

因为一个id管理了一个配置，所以多加几个id就行了

另外，我使用之后发现这个插件只能对“条目”进行过滤，也就是如果对一个大的容器添加搜索，里面的内容可以高亮显示但是多层容器里的内容不会动态隐藏。