ryancramerdesign / ProcessWire

Our repository has moved to https://github.com/processwire – please head there for the latest version.
https://processwire.com
Other
727 stars 199 forks source link

Allow html in labels for jQuery Autocomplete #1810

Open somatonic opened 8 years ago

somatonic commented 8 years ago

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

adrianbj commented 8 years ago

👍