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時には結果候補を消さないような処理としています。