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. Zoomerang.js
  2. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  3. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  4. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  5. Animated Intro With jQuery

    JavaScript

    プログレスバーつきのカッコいいイントロページを実装する「Animated Intro With jQ…

    シンプルなアニメーションがとてもカッコいいイントロページを実装する「A…

  6. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP