ホーム>プログラミング関連>その他のソースコード
ダウンロード

ページ内を素早く簡単に検索できます。

Holmes は、わずか約 2KB のinput値に基づいて要素のリストをフィルター処理します。

インストール

Holmes は、 npmまたはbowerを使用して、パッケージ名holmes.jsでインストールできます。 npmの場合は次のようになります。 

$ yarn add holmes.js # or via npm

その後、webpack、rollup、browserify を使用してページに追加するか、別のスクリプト タグでモジュールを読み込むことができます。

必要に応じて要素を非表示にするクラス.hiddenのcssルールがあることを確認する必要があります。 1 つのオプションは、次のようにすることです。 

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

入力の querySelector

例: 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

Holmes がフィルタリングを開始する前に、最小限の文字を入力する必要があります。

例: 2 、 5

mark

デフォルト: false

.find内の<mark>タグで結果の表示を開始するには、これを有効にする必要があります。このmatchが表示される色を変更するには、 mark背景色のスタイルを設定する必要があります。

❗ これにより、ネストされたコンテンツのイベント リスナーが壊れます

❗ 一致後の文字がリテラル>の場合、これは機能しません。

この文字をどうしても使用する必要がある場合は、出現するすべての>を&gt;

例: true 、 false

hiddenAttr

デフォルト: true

隠し要素にhidden="true"を追加します。その使用法を説明する興味深いリンク。

shouldShow

デフォルトの一致判定は入力値の部分一致です。 

 function ( htmlText , search ) {
  return htmlText . indexOf ( search ) !== - 1 ;
}

最初の引数として要素のテキストを指定し、2 番目の引数として現在の入力テキストを指定して呼び出されるカスタム マッチング関数。要素を表示したい場合は 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()

以下を使用して、プログラムでホームズ入力をクリアできます。 

 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

ホームズのこのインスタンスに対して選択されたオプションを表示します。初期化後にこのようなオプションを設定することもできます。 

 console . log ( h . options ) ; // specified options

注: 実行後にオプションを設定するにはh.stop().then(h.start)が必要になる場合があります。

ショーケース

何誰が画像
ブルグイット@ハロエンブ
ファミリー.scss @lukyvj
ウィケオ.be @bistory
ランチブレイクapp.be @AndreasBackx

人々が私のプロジェクトをどのように利用しているのか知りたいです。取り上げたい場合はお知らせください。

質問がありますか?

IE11まで対応。古いブラウザをサポートするには、 classList 、 addEventListener 、およびinputイベントを remy/polyfills などでポリフィルする必要があります。私自身はまだ試していないので、古いブラウザをサポートしている場合は、何を使用したか教えてください。

IE11 の場合、 Object.assignとString.includesをポリフィルする必要があります。 #90 で説明されているようにそれを行うことができます。

Twitter:@haroenv、または問題でお知らせください。

貢献する

貢献はいつでも大歓迎です!以下に大まかなガイドラインをいくつか示します。

  • feature branchesを使用する
  • それを遅くしないでください
  • なぜその機能が必要なのかを説明する
  • npm run docでドキュメントを再作成します

UMD へのビルドはロールアップ ( npm run build ) によって行われます。

しかし、私は噛むつもりはありません。質問や不安がある場合は、たとえば gitter で私に連絡してください。

ライセンス

アパッチ2.0

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて