incsearch.js

サンプル2：テーブル表示のサンプル

incsearch.js(IncSearch.ViewTable)を使った、テーブルからインクリメンタルサーチを行う簡単なサンプルです。

incsearch.jsの説明は、「incsearch.js - インクリメンタルサーチライブラリ」を参照ください。

サンプル

下記に入力すると、一覧から部分一致で検索し、一致する列を表示します。(スペース区切りで複数入力可)

※オプションで大文字・小文字を区別して検索するように指定しています。

  

言語フレームワーク・ライブラリ
JavaSeasar2
JavaSpring
JavaStruts
JavaShale
RubyRuby on Rails
PHPZend Framework
PHPSymfony
PHPMojavi
PHPCakePHP
PerlCatalyst

サンプルの内容

new IncSearch.ViewTable(
  'text',      // 入力が行われるエレメントのID
  'view_area', // 検索結果を表示するエレメントのID
  list,        // 検索対象のリスト
  {
    dispMax: 10,  // オプション
    startElementText: '<table><tr><th width="30%">言語</th><th width="70%">フレームワーク・ライブラリ</th>',
    ignoreCase: false
  }
);
  • テーブル表示(IncSearch.ViewTable)のサンプルです。
  • オプション(dispMax)により、表示件数を10件までにしています。
  • オプション(ignoreCase:false)により、大文字／小文字を区別して検索されます。
  • オプション(startElementText)にて、テーブルのヘッダ部分を指定しています。