holmes
v1.17.2
在页面内快速轻松地搜索。
Holmes 根据仅约 2KB 的input值过滤元素列表。
您可以使用npm或bower在包名称holmes.js下安装 Holmes。对于npm来说，它看起来像这样：
$ yarn add holmes.js # or via npm之后，您可以使用 ie webpack、rollup、browserify 将其添加到页面中，或在不同的脚本标记中加载模块。
您必须确保您有一个.hidden类的css规则，可以根据需要隐藏元素。一种选择是这样：
. hidden {
display : none;
}但这可以是你想要的任何css 。
演示
你应该在什么时候使用福尔摩斯
如果您有更复杂的期望，我建议使用像 Algolia 这样的服务。
公平披露：我目前在 Algolia 工作，看起来有趣吗？加入我们！
holmes ( {
input : '.search input' , // default: input[type=search]
find : '.results div' // querySelectorAll that matches each of the results individually
} ) 完整的文档
input默认值： input[type=search]
输入的查询选择器
示例： input 、 .search input
find需要的querySelectorAll 用于搜索的元素
示例： blockquote p 、 .result 、 .results div
classclass.hidden默认： hidden
当.find不包含搜索查询时要添加的类。
示例： hidden 、 dn 、 none
class.visible默认值： false
如果可见项目包含搜索查询，则添加到可见项目的类。
示例： visible 、 vis 、 nohidden
placeholder默认值： false
没有结果时显示 html。
示例： <p> No results </p> ， Didn't find anything.
dynamic默认值： false
如果您希望 Holmes 在每次输入时查询.find的值，请启用此选项。
示例： true , false
instant默认值： false
此选项已弃用。要在异步环境中使用 Holmes，请使用以下命令对其进行初始化：
holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ;这样它就会立即开始，就像以前使用instant: true一样。带来不便敬请谅解。
默认情况下，Holmes 将等待DOMContentLoaded事件来开始搜索。例如，如果您通过AJAX加载元素，则此事件来得太早。在这种情况下，您可以启用instant ，并在内容准备好后启动 Holmes。
示例： true , false
minCharacters默认值： 0
在 Holmes 开始过滤之前，需要输入最少量的字符。
例子： 2 , 5
mark默认值： false
要开始在.find内的<mark>标记中显示结果，您应该启用此功能。要更改此match显示的颜色，您应该设置mark背景颜色的样式。
❗ 这将破坏嵌套内容上的事件侦听器
❗ 如果匹配后的字符是文字
>则这将不起作用。
如果您确实必须使用此字符，则可以将所有出现的
>替换为>
示例： true , false
hiddenAttr默认值： true
将hidden="true"添加到隐藏元素。解释其用途的有趣链接。
shouldShow默认匹配判断是输入值的部分匹配。
function ( htmlText , search ) {
return htmlText . indexOf ( search ) !== - 1 ;
}要调用的自定义匹配函数，第一个参数是元素的文本，第二个参数是当前输入文本。如果您希望元素显示，则应返回 true；如果需要隐藏，则应返回 false。
var customMatching = function ( htmlText , search ) {
return search . split ( / s+ / ) . every ( function ( v , i ) {
if ( htmlText . indexOf ( v ) === - 1 ) {
return false ;
}
return true ;
} ) ;
}
holmes ( {
shouldShow : customMatching
} )onHidden隐藏项目时的回调。
function ( el ) {
console . log ( 'hide' , el ) ;
}onVisible当某个项目再次可见时的回调。
function ( el ) {
console . log ( 'show' , el ) ;
}onEmpty未找到项目时的回调。
function ( placeholder ) {
console . log ( 'nothing found' , placeholder ) ;
}onFound当项目为空后找到时的回调。
function ( placeholder ) {
console . log ( 'something found' , placeholder ) ;
}onInput每个输入的回调。
function ( input ) {
console . log ( 'current input' , input ) ;
} 对于所有方法，您应该像这样初始化 Holmes 的新实例：
var h = new holmes ( options ) ;那么你可以使用以下方法：
.clear()您可以使用以下命令以编程方式清除 holmes 输入：
h . clear ( ) ;.count()您可以随时接收有关哪些元素可见、隐藏以及总数的信息：
h . count ( ) ; // {all: 41, hidden: 34, visible: 7}.start()为指定选项启动偶数侦听器。 Holmes总是在初始化时运行.start() 。
h . start ( ) ;.stop()停止当前正在运行的事件侦听器。完成后解决 Promise。
h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon
h . stop ( ) . then ( h . start ) ; // might take a small time.hidden还有一个成员.hidden可以在不调用函数的情况下提供计数：
console . log ( h . hidden ) ; // 34.elements holmes 考虑的所有元素的NodeList 。还有.elementsLength表示元素数量， .elementsArray表示元素数组。
.input holmes 查找的输入。还有最后一个搜索字符串.searchString
.placeholder当前占位符（DOM 节点）。
.running该实例是否正在运行。
.options显示为此 holmes 实例选择的选项。您还可以在初始化后设置类似的选项。
console . log ( h . options ) ; // specified options注意：运行后设置选项可能需要
h.stop().then(h.start)
| 什么 | WHO | 图像 |
|---|---|---|
| 牛牛网 | @haroenv | |
| 家庭.scss | @lukyvj | |
| wikeo.be | @bistory | |
| 午餐休息应用程序.be | @AndreasBackx |
我很想了解人们如何使用我的项目，如果您想成为特色，请告诉我！
兼容至 IE11。为了支持旧版浏览器，您需要使用例如 remy/polyfills 来填充classList 、 addEventListener和input事件。我自己还没有尝试过，所以如果您支持旧版浏览器，请告诉我您使用了什么！
对于 IE11，您需要填充Object.assign和String.includes ，您可以按照 #90 中的描述执行此操作
请在 Twitter 上告诉我：@haroenv，或在问题中告诉我。
随时欢迎您的贡献！以下是一些宽松的准则：
feature branchesnpm run doc重新创建文档构建 UMD 是通过 rollup ( npm run build ) 完成的。
但我不会咬人，如果你有任何问题或不安全感，可以通过 gitter 等方式联系我。
阿帕奇2.0
