サイト検索は常に問題になります。Web全体を対象とするならばGoogleでも良いでしょう。その反動か、サイト独自の検索は突然使い勝手が悪く感じられるものです。少しでも使いやすい検索を提供しないとユーザは離れてしまいます。 今回はJavaScriptベースのページ内検索、Holmesを紹介します。JavaScriptだけあってインクリメンタルに検索できます。

Holmesの使い方

検索ボックスにキーワードを入れると即座に情報が絞り込まれていきます。

実際に使っているところです。

一つだけになるとDOMの幅が変わっています。

使い方としても、

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

のように使うだけです。入力するクラスを指定すれば、後は検索対象のDOMの内容が絞り込まれます。とても簡単に使えますのでサイト内のリストや一覧を絞り込んだりするのに使えそうです。

HolmesはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

Holmes Haroenv/holmes: Fast and easy searching inside a page