jQuery EasyUI の検索ボックス(SearchBox)を使う

検索用の「テキストボックスと検索ボタン」の組み合わせは使いたい局面が多いが、jQuery EasyUI の検索ボックス(SearchBox)により簡単に実装できる。

説明文字(プレースホルダ)が薄い灰色で表示され、虫眼鏡ボタンがクリックされるか、Enterキーを押すと処理が実行される。

<!-- HTML -->
<input
 id="srcCompany" name="srcCompany" 
 class="easyui-searchbox"           <!-- SearchBox を指定 -->
 style="width:150px" 
 data-options="searcher:searchItem, <!-- イベントハンドラ --> 
 prompt:'Input Company Name'">      <!-- プレースホルダ -->
</input>

クリック時のイベントハンドラ名を’searcher’オプションで指定する。イベントハンドラにはクリック時の入力値と、input要素のnameの値が渡される。複数のSearchBox に異なるname を指定することにより、イベントハンドラを共通化することができる。

<!-- HTML -->
<input name="srcCompany" class="easyui-searchbox" data-options="searcher:searchItem"/>
<input name="srcLine" class="easyui-searchbox" data-options="searcher:searchItem"/>

// JavaScript
// 共通のイベントハンドラ _name の値で処理を分岐する
function searchItem(_value, _name){ // 空白のときは何もしない
  if (_value != '') {
    switch(_name){
      case 'srcCompany': 
        setCbxCompany( filterCompanyByName(_value));
        break;
      case 'srcLine':
        setCbxLine( filterLineByName(_value) );
        break;
    }
  }
}