列車時刻表(4) – 駅・路線検索ページの作成

作成中の時刻表に、「駅名・路線名」検索ページを追加する。
追加後の実行サンプルはこちら。画面は以下の感じ。

検索文字を入力するテキストボックスの作成は、input要素で type=”search” を指定する。入力内容はchangeイベントを処理して取得する。

• 路線検索
  以下のような検索ボックスを用意して、イベントハンドラを定義する。

  <!-- HTML -->
  <input type="search" id="srcTTSrcStations" value="..."/>
  

  // JavaScript
  $(this).on('change', '#srcTTSrcLines', function(){
    var keyword = $(this).val();
    // 検索キーワードを含む「路線オブジェクト」を抽出
    var srcLines = gLines.filter(function(item, index){
      if ((item.ln_name).indexOf(keyword) >= 0) return true;
    });
    // 路線一覧を表示する
    showLineList($('#lvTTSrcLines'), srcLines); 
  });
  

  路線一覧を表示する関数: showLineList() は、もともと作成していた路線表示関数と機能的にほぼ同じなので、表示対象のjQueryオブジェクトをパラメータとして追加して共通化した。検索にはindexOf()関数を使っていて、対象にキーワードが含まれていれば全てマッチする。例えば、検索キーワード「山」に対し、「郡山」「中山宿」などがヒットする。

• 駅検索
  これまで、アプリを起動したときは「路線一覧」を読み込み、路線を選択したタイミングでその路線の駅一覧やダイヤを読み込んでいた。検索ページの追加に伴い、起動時に全ての駅名をデータストアから読み込む機能を追加する。なお(駅一覧はあらかじめデータストアに格納しておく。
  ([TODO] 検索実行時にデータストアから条件検索で取得するように変更する。)

  // JavaScript
  // 起動時に実行
  // 駅一覧をデータストアから読み込み
  gDSTTStation = new xuDatastore('TTStation', 'st_key', gcPropsTTStation);
  gDSTTStation.dbRev('', '', function(d){ // sort順、queryを指定せずに全件取得する
    gStationsSrc = d;
  });
  

• 実行例