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. pixelate.js
  2. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  3. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  4. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  5. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  6. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP