ProcessWire
ProcessWire copied to clipboard
Allow html in labels for jQuery Autocomplete
Would you consider adding some support for HTML in labels for the Autocomplete Input or maybe even other page select inputs?
I needed this to be able to show thumbnails in the autocomplete search results.
I found a extension that would enable to have HTML in jQuery's Autocomplete. https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js
I'm injecting this JS in the admin via a hook.
Then I'm initializing/overwrite the autcomplete setting on my inputfield to enable HTML.
$(function(){
$("#Inputfield_select_articles_input").autocomplete({ html: true});
});
This works to enable it in the autocomplete results. But the problem is when selecting a page, it will add the item label via your the code you have in InputfieldAutocomplete.js via text(). This will show the tag encoded when adding a item (until I save the page where the label will get rendered with html).
For this to work I had to change in the InputfieldAutocomplete.js #L 220:
$li.children('.itemLabel').text(page.label);
to:
$li.children('.itemLabel').html(page.label);
What I'm doing to create the label with the thumbnail, was to use your great "concat" field to create a field with the text labels I need, then I prepend the thumbnail tag via a FieldtypeConcat::wakupValue hook.
What this enables me is to have something like this:

👍