incsearch.js

インクリメンタルサーチライブラリ

クライアントサイドで、JavaScriptによるインクリメンタルサーチを行うためのライブラリです。
(【お知らせ】ver2.0からprototype.jsを必要としなくなりました)

下記のような機能を持っています。

  • 入力内容をもとに検索を行い、一致するデータを表示します。
  • 単純なリスト表示と、テーブル形式での表示に対応しています。
  • Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。
  • 一致した文字を強調表示します。
  • 複数キーワード(AND条件)での検索が行えます。
  • オプションで検索条件などを簡単に切り替えられます。
  • 表示件数の上限を指定でき、ページ遷移にも対応しています。

ソース

incsearch.js (ver2.2 : 2008/04/02)

GitHub上でコードを管理しています。
onozaty/incsearch.js - GitHub

サンプル

incsearch.jsを使用したアプリ

使用方法

本ライブラリでは、一覧表示(IncSearch.ViewList)と、テーブル表示(IncSearch.ViewTable)、ブックマーク表示(IncSearch.ViewBookmark)の3パターンの表示があります。
ここでは一覧表示(IncSearch.ViewList)を例として説明します。

  1. 一致した文字に対する強調表示のためのスタイルを設定しておきます。(強調表示を行わない場合には設定する必要はありません。)
    強調表示はキーワード毎に4種類に分けてclass属性が設定されます。
    デフォルトでは、"high" + 通番(1～4)といった形式です。(class名と通番の範囲はオプションでも変えられます。) 
    strong {
  font-weight: normal;
}
strong.high1 {
  background-color: #FFFF99
}
strong.high2 {
  background-color: #CCFFFF;
}
strong.high3 {
  background-color: #CCFF99;
}
strong.high4 {
  background-color: #FFCC99;
}
  2. 入力フォーム(テキストボックス)と検索結果を表示するエリアを定義します。 
    <form onsubmit="return false;">
  <p>入力:
    <!-- 検索条件の入力欄 -->
    <input id="text" type="text" name="pattern" value="" size="50" />
  </p>
</form>
<!-- 検索結果の表示エリア -->
<div id="view_area"></div>
  3. 本ライブラリ(incsearch.js)を読み込みます。
  4. windowのonloadイベントにて、IncSearch.ViewListの生成を行います。
    ※"new IncSearch.ViewList"の部分は、表示方法によって変えてください。("new IncSearch.ViewTable"など) 
    function startIncSearch() {
  new IncSearch.ViewList(
    'text',      // 入力が行われるエレメントのID
    'view_area', // 検索結果を表示するエレメントのID
    list,        // 検索対象のリスト
    {dispMax: 10, interval: 1000}); // オプション
}

window.addEventListener ?
  window.addEventListener('load', startIncSearch, false) :
  window.attachEvent('onload', startIncSearch);
    IncSearch.ViewListの引数は、下記の通りです。
    • 第1引数：検索条件の入力が行われるエレメントもしくはそのID
    • 第2引数：検索結果を表示するエリアのエレメントもしくはそのID
    • 第3引数：検索対象となる文字列の配列
    • 第4引数：オプション(省略可)

    第3引数の検索対象となる文字列の配列は、表示方式によって形式が異なります。
    • リスト表示(IncSearch.ViewList)：
      1次元配列で、配列内の1項目(文字列)が1列として扱われます。
      [データ例] 
      var list = ['Java', 'JavaScript', 'Python', 'Perl', 'Ruby', 'PHP'];
    • テーブル表示(IncSearch.ViewTable)：
      2次元配列で、1項目がテーブルのカラムと対応し、複数のカラムで1行を構成します。
      [データ例] 
      var list = [
            ['1', 'Java', 'Seasar2'],
            ['2', 'Ruby', 'Ruby on Rails'],
            ['3', 'Java', 'Spring Freamwork'],
            ['4', 'PHP', 'Zend Framework']
           ];
    • ブックマーク表示(IncSearch.ViewBookmark)：
      1次元配列で、配列内の1項目(ブックマークの情報を表すオブジェクト)が1列として扱われます。
      [データ例] 
      var list = [
            {url: 'http://www.enjoyxstudy.com/',  // URL
             title: 'Enjoy*Study',                // タイトル
             info: 'javascriptなどの紹介',        // 補足情報
             tags: ['javascript', 'html'],        // 分類するタグ(配列)
             others: ['2006/03/29']               // その他の情報(配列)
            },
            {url: 'http://www.google.com/',
             title: 'Google',
             info: '',
             tags: ['search'],
             others: ['2006/03/30']
            }
           ];

    第4引数のオプションは、下記のように指定出来ます。
    • interval：入力内容の差分をチェックし、検索を開始する周期(デフォルト500ms)
    • delay：検索開始を遅らせるタイミング(デフォルト0ms)
    • initDispNon：検索条件未入力時に検索対象データを表示しない(デフォルトは表示する(false))
    • dispMax：補完候補として表示する件数(デフォルトは20件)。0にすると制限無しとなる。
    • ignoreCase：検索時の大文字/小文字の区別(デフォルトは区別なし(true))
    • highlight：検索に一致した文字の強調表示(デフォルトは強調表示あり(true))
    • highClassName：強調表示で作成するclassの接頭語(デフォルトは"high")
    • highClassNum：強調表示で作成するclassの数(デフォルトは4)
    • delim：複数語入力のための区切り文字(デフォルトは半角スペース)
    • escape：表示文字のエスケープ実行有無(デフォルトはエスケープ無し(false))
    • startElementText：検索結果の先頭につけるHTML(IncSearch.ViewTable、ViewBookmarkの場合は、'<table>'がデフォルト)
    • endElementText：検索結果の末尾につけるHTML(IncSearch.ViewTable、ViewBookmarkの場合は、'</table>'がデフォルト)
    • searchBefore：検索開始前に実行する処理(関数を指定できる)
    • searchAfter：検索終了時に実行する処理(関数を指定できる)
    • pageLink：ページリンクを表示するエレメント。(指定が無い場合は、ページ表示を行わない)
    • pagePrevName：ページリンク表示の前ページへ移動するリンクの名称(デフォルトは"prev")
    • pageNextName：ページリンク表示の次ページへ移動するリンクの名称(デフォルトは"next")
    • changePageBefore：ページ遷移前に実行する処理(関数を指定できる)
    • changePageAfter：ページ遷移後に実行する処理(関数を指定できる)
    • useHotkey：Ctrl + Left/Right によるページ遷移。(デフォルトは無効(false))
    • listTagName：リストを生成する際のタグ名(デフォルトは'div')※IncSearch.ViewListの場合のみ指定可能
    • tagBracket：ブックマークに付与したTagを括弧(ex.[JavaScript]<->JavaScript)で囲むかどうか(デフォルトは囲まない)※IncSearch.ViewBookmarkの場合のみ指定可能
    • target：ブックマークのリンクに付与するtarget。"_blank"を指定すると別ウインドウで開くことになる。(デフォルトはtargetの指定なし)※IncSearch.ViewBookmarkの場合のみ指定可能
    • moveRow：Ctrl + Up/Down での列移動。(デフォルトは無効(false))※有効(true)とする場合、useHotKeyもtrueにしておく必要あり
    • focusRowClassName：選択列のclass名。(デフォルトは"focus")
    • selectRowCallback：列選択状態でCtrl + Returnを押下した際に実行される関数。引数として選択列の内容が渡される。

仕組み

  • 入力フォームの内容を一定周期(デフォルトは500ms)で確認し、前回と変更があった場合にJavaScriptで検索を行い、検索結果を描画します。

注意点

  • 検索対象のデータ件数が、膨大な数(数十万件など)になると、ブラウザがフリーズする場合があります。検索対象のデータ件数には注意してください。

ライセンス

MITライセンスとします。

商用・非商用に関わらず無償で利用することができます。著作権表記とライセンス表記さえ行えば、再配布、再利用に制約はありません。

原文はこちら：MIT-LICENSE.txt

その他

IE6、IE7、Firefox2.0、Opera9、Safari2.0.4にて動作確認が出来ております。

お問い合わせ、コメント等は下記Blogまたは、Contact からお願いします。