ProcessWire icon indicating copy to clipboard operation
ProcessWire copied to clipboard

Allow html in labels for jQuery Autocomplete

Open somatonic opened this issue 9 years ago • 1 comments

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:

image

somatonic avatar May 04 '16 15:05 somatonic

👍

adrianbj avatar May 04 '16 17:05 adrianbj