holmes

在頁面內快速輕鬆地搜尋。

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

class

class.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

在福爾摩斯開始過濾之前，需要輸入最少量的字元。

例： 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)

展示櫃

什麼	世界衛生組織	影像
牛牛網	@haroenv
家庭.scss	@lukyvj
維基百科	@bistory
午餐休息應用程式.be	@AndreasBackx

我很想了解人們如何使用我的項目，如果您想成為特色，請告訴我！

問題？

相容至 IE11。為了支援舊版瀏覽器，您需要使用例如 remy/polyfills 來填入classList 、 addEventListener和input事件。我自己還沒有嘗試過，所以如果您支援舊版瀏覽器，請告訴我您使用了什麼！

對於 IE11，您需要填入Object.assign和String.includes ，您可以按照 #90 中的描述執行此操作

請在 Twitter 上告訴我：@haroenv，或在問題中告訴我。

貢獻

隨時歡迎您的貢獻！以下是一些寬鬆的準則：

• 使用feature branches
• 不要讓它變慢
• 解釋為什麼你想要一個功能
• npm run doc重新建立文檔

建構 UMD 是透過 rollup ( npm run build ) 完成的。

但我不會咬人，如果你有任何問題或不安全感，可以透過 gitter 等方式聯絡我。

執照

阿帕契2.0