检索本页关键词-原生js插件

检索本页关键词-原生js插件

预览地址：检索本页关键词-原生js插件

分享一个查找本页关键词的原生js插件，插件挺简单的，未压缩版也就6.7KB，可以说是小巧玲珑，在某些项目中可以直接拿来用。
这个插件可以检索本页面某个你想检索的列表区域的子项目块是否包含关键词，如果有包含关键词的块，就把不包含的块隐藏掉，如果都不包含则提示一段可以自定义的内容。具体是什么东西，自己稍微试一下就明白了。

使用方法

1. 直接引入holmes.js

<script src="js/holmes.js"></script>

2. 配置
   方法如下：

holmes({
  // queryselector for the input
  input: '.search input',
  // queryselector for element to search in
  find: '.results article',
  // (optional) text to show when no results
  placeholder: 'no results',
  class: {
    // (optional) class to add to matched elements
    visible: 'visible',
    // (optional) class to add to non-matched elements
    hidden: 'hidden'
  },
  // (optional) if true, this will refresh the content every search
  dynamic: false,
  // (optional) needs to be true if the input is a contenteditable field instead of a
  contenteditable: false,
  // (optional) in case you don't want to wait for DOMContentLoaded before starting Holmes:
  instant: true
});

有一些配置是可选项，可以忽略，根据自己需求看一下就ok，下边是本例子的配置信息：

holmes({
    input: 'input',
    find: 'article',
    placeholder: '<p>没有相关内容...</p>',
    class: {
        visible: 'visible',
        hidden: 'hidden'
    },
    instant: true
});