Holmes

JavaScript

ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリです。テキストフィールドに文字を入力すれば、ページ内部の該当する部分を高速で検索表示してくれます。Holmesという名称は、かの有名な小説「シャーロック・ホームズシリーズ」からのネーミングのようです。配布サイトには探偵のアイコンが載せられていました。正しく、探偵のように的確な検索結果を表示してくれるライブラリだと思います。

Holmes

デモ

Holmesは、JavaScriptライブラリです。ファイルサイズは約2MBと重ためです。設置にはいくつかの準備も必要なので簡単に紹介したいと思います。まず、Holmesを導入するには、npmでもbowerでもどちらでもいいので、それらのインストールが必要です。記述は次のとおりです。

$ npm install --save holmes.js (npmの場合)

npmとはNode.jsのライブラリやパッケージを管理できるツールです。インストールができたら、browserifyまたは、異なるスクリプトタグのモジュールをロードすることで、設置したいページへHolmesを追加できます。

では、実際の記述ですが、簡単な例を以下に紹介します。

holmes({
  input: '.search input',
  find: '.results div'
})

この記述は、「検索が入力されると、それと一致するものを結果とします」という内容です。この他にもいくつかオプションがあるので、配布サイトで確認してみてください。

Holmes

関連記事

  1. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  2. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  3. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  4. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  5. jQuery liMarquee
  6. hoverpulse

    JavaScript

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hoverpulse」

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hov…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP