メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

jQuery UI autocompleteの結果表示をカスタマイズしてdivやtableに表示させる

前回の続きです

jquery-workshop.hatenablog.com

今回は、結果表示の方

前回は検索条件と検索対象のカスタマイズでしたが
今回は検索結果表示のカスタマイズです。

autocompleteではテキストボックスの下に一覧が出るのが標準ですが
これを

<div id="search_results">
  <div class="search-resuls">  ... </div>
  <div class="search-resuls">  ... </div>
  <div class="search-resuls">  ... </div>
</div>

<table id="search_results">
  <tbody>
    <tr><td> ... </td></tr>
    <tr><td> ... </td></tr>
    <tr><td> ... </td></tr>
  </tbody>
</table>

としたいことって、結構あるのではないかと。

ちょっと入り組んだカスタマイズが必要ですが
手順通りやればできます。

コードの処理概要

データの用意や検索方法については前回のものを踏襲します。

上記の実例を要約すると、

$.widget('app.autocomplete', $.ui.autocomplete, {
    _suggest: // ※1
    _close: // ※2
});

$('#query').autocomplete({
    suggest: // ※3
});

というような拡張と実装となっています。

※1については、結果候補の拡張実装があれば(※3で定義)呼び出すような処理に。
※2については、結果候補のクリア処理の拡張で、
入力が空 または minLength未満 または blur時に呼び出されます。
サンプル実装においては、結果候補の一覧のリンクを押したりすることがあるため
blur時には結果候補を消さないような処理としています。

こんな感じの挙動になります


jQuery UI autocompleteの検索結果表示をカスタマイズ