incsearch.js を利用して、インクリメンタルサーチを試してみる #JavaScript

概要

incsearch.js を利用して、インクリメンタルサーチを試してみます
サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="./incsearch.js"></script>
  <script type="text/javascript" language="javascript">
  <!--
    var list = [
      ['高橋名人の大冒険島','ハドソン'], 
      ['プロフットボール','イマジニア'], 
      ['ドラゴンボールZ 超サイヤ伝説','バンダイ'], 
      ['ロマンシング サ・ガ','スクウェア'], 
      ['ソウルブレイダー','エニックス'], 
      ['ドラゴンスレイヤー英雄伝説','エポック社'], 
      ['エキゾースト・ヒート','セタ'], 
      ['魂斗羅スピリッツ','コナミ'], 
      ['ロケッティア','アイジーエス'], 
      ['スーパーバーディー・ラッシュ','データイースト'], 
      ['弟切草','チュンソフト'], 
      ['スーパー伊忍道 打倒信長','光栄'], 
      ['R.P.M.レーシング','ビクターエンタテインメント'], 
      ['新世紀GPXサイバーフォーミュラ','タカラ'], 
      ['ファイナルファイト・ガイ','カプコン'], 
      ['超攻合神サーディオン','アスミック'], 
      ['スーパーファミスタ','ナムコ'], 
      ['ハットトリックヒーロー','タイトー'], 
      ['ザ・グレイトバトルII ラストファイターツイン','バンプレスト'], 
      ['ラッシング・ビート','ジャレコ'], 
      ['スマッシュT.V.','アスキー'],
    ];

    // wondowのonloadイベントに追加
    var start = function(){
      new IncSearch.ViewTable(
        'text',
        'view_area',
        list,
        {
         startElementText: '<table><tr><th width="50%">ゲーム</th><th width="50%">メーカー</th>',
         ignoreCase: false
        }
      );
    };
    window.addEventListener ?
      window.addEventListener('load', start, false) :
      window.attachEvent('onload', start);
  </script>
  <style type="text/css">
     <!--
       strong {
         font-weight: normal;
       }
       strong.high1 {
         background-color: #FFFF99
       }
       strong.high2 {
         background-color: #CCFFFF;
       }
       strong.high3 {
         background-color: #CCFF99;
       }
       strong.high4 {
         background-color: #FFCC99;
       }
       -->
   </style>

  <title>incsearch.js</title>
</head>
<body>
  <input id="text" type="text" name="pattern" value="" autocomplete="off" size="40" />
  &nbsp;&nbsp;<span id="status"></span>
  <!-- 検索結果の表示エリア -->
  <div id="view_area"></div>
</body>
</html>
デモ

外部資料

incsearch.js