jQuery UIのAutocompleteの_renderItem関数を書き換えて、候補リストにFont Awesomeアイコンを表示

背景

Font Awesomeのアイコンは

<i class="fa fa-address-book" aria-hidden="true"></i>

のようにタグで指定します。しかし、

jQuery UIのAutocompleteのリストに画像を表示させる - Qiita

JavaScriptでオートコンプリート機能を実装する場合、
jQueryUIにAutocompleteという便利な機能があります。
http://jqueryui.com/autocomplete/
しかし、jQueryUIのAutocompleteで表示する候補リストは
テキストでしか表示できないようになっています。

方法

そこでjQueryUIネイティブの_renderItem()関数を置き換えることで
htmlタグを利用できるようにします。

同じように_renderItemを書き換えます。

書き換える前の、オリジナルは

    _renderItem: function( ul, item ) {
        return $( "<li>" )
            .append( $( "<div>" ).text( item.label ) )
            .appendTo( ul );
    }

です。これを良い感じに書き換えます。

例えば、labelに入っている@をglobeアイコンに置き換えます。

  $.ui.autocomplete.prototype._renderItem = function(ul, item) {
    const [label, url] = item.label.split('@')

    return $("<li>")
      .append($(`<div>${label} <i class="fa fa-globe"></i>${url}</div>`))
      .appendTo(ul)
  }