Using HTML in Autocomplete

[pauleee]

It's not possible to use HTML in the suggestion.

File: jquery.ui.autocomplete.js Line: 324-329

Original: _renderItem: function( ul, item) {

return $( "<li></li>" )

.data( "item.autocomplete", item ) .append( $( "<a></a>" ).text( item.label ) ) .appendTo( ul );

}

Fixed:

_renderItem: function( ul, item) {

return $( "<li></li>" )

.data( "item.autocomplete", item ) .append( $( "<a></a>" ).html( item.label ) ) .appendTo( ul );

}

[rdworth]

This change is by design ( see #5275 ). As mentioned over there, "Defaulting to plaintext and defining your own render method for HTML and other complex displays makes sense."

An extension can provide a custom _renderItem, such as ​http://jqueryui.com/demos/autocomplete/custom-data.html so no change to the default is required.

[carpeliam]

Is there perhaps a middle-of-the-road longterm solution? I understand that plaintext makes for a good default, but using _renderItem smells like monkey-patching to me. It's an undocumented method (outside of examples) as far as I can tell, it requires the plugin user to know something about the implementation of the plugin (I need to be aware that ULs and LIs are being used under the hood), and doesn't feel very forward-compatible.

Perhaps an option can be added to the plugin for rendering in html?

[Scott González]

I've created an extension that adds a boolean html option: ​http://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js

[carpeliam]

Thanks Scott, that's by far a much easier solution to work with. However, I'd love to see this rolled into the jqueryui codebase, just in case jqueryui implementation details change in the future, breaking this code.

[Scott González]

#6753 is a duplicate of this ticket.

[Scott González]

Milestone TBD deleted

[Scott González]

#9093 is a duplicate of this ticket.