incsearch.js

サンプル3：テーブル表示＆ページ遷移＆列選択のサンプル

incsearch.js(IncSearch.ViewTable)を使った、テーブル表示＆ページ遷移のサンプルです。

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

---

サンプル

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

ページリンクを選択するか、またはCtrl + Left/Right でページ遷移します。

Ctrl + Up/Downで選択列を移動し、Ctrl + Returnで選択列の内容を表示します。

---

サンプルの内容

new IncSearch.ViewTable(
  'text',      // 入力が行われるエレメントのID
  'view_area', // 検索結果を表示するエレメントのID
  list,        // 検索対象のリスト
  {dispMax: 10,  // オプション
   startElementText: '<table><tr><th width="20%">郵便番号</th><th width="80%">住所</th>',
   searchBefore:
     function(){
       $('status').innerHTML = 'search...';
     },
   searchAfter:
     function(){
       var matchCount = this.matchList.length;
       var displayInfo = '';

       if (matchCount != 0) {
         var start = 1;
         var end   = this.dispMax;

         if (this.dispMax == 0 || end > matchCount) {
           end = matchCount;
         }
         displayInfo = '(<span id="display">' + start + 'から' + end + '</span>件まで表示)';
       }
       $('status').innerHTML = this.searchValues.length.toString() + '件中 '
                               + matchCount + '件ヒット ' + displayInfo;
     },
   changePageAfter:
     function(pageNo){
       var matchCount = this.matchList.length;

       var start = (pageNo - 1) * this.dispMax + 1;
       var end   = start + this.dispMax - 1;

       if (end > matchCount) {
         end = matchCount;
       }

       $('display').innerHTML = start.toString() + 'から' + end; 
     },
   pageLink: 'page_link',
   pagePrevName: '前ページ',
   pageNextName: '次ページ',
   moveRow: true,
   selectRowCallback: function(rowData){setTimeout(function(){alert(rowData)}, 1);},
   useHotkey: true
   }
);

• テーブル表示(IncSearch.ViewTable)のサンプルです。
• 対象データは、東京都の郵便番号:住所(3302件)で、外部JS(list.js)に記載し、それを読み込んでいます。
• オプション(dispMax)により、表示件数を10件までにしています。
• オプション(startElementText)にて、テーブルのヘッダ部分を指定しています。
• オプション(searchBefore、searchAfter)を使用し、検索条件に一致した件数を表示しています。
• オプション(searchAfter、changePageAfter)を使用し、現在ページでの表示範囲を表示しています。
• オプション(pageLink、pagePrevName、pageNextName)を使用し、ページリンクを表示しています。
• オプション(useHotkey:true)により、Ctrl + Left/Right でページ遷移が行えます。
• オプション(moveRow:true)により、Ctrl + Up/Down で列の遷移が行えます。また、selectRowCallbackオプションで、Ctrl + Returnで選択列の情報を表示するようにしています。