Displaying HTML in the list of suggestions

By default, the autocomplete widget will only display plain text for each suggestion in the list. Of course, this plain text is within HTML elements created by the widget, but nevertheless, if we try to use HTML within our data source, then it will be stripped out and ignored. However, Scott González, the current project leader for jQuery UI, has written an extension that allows us to use HTML for each suggestion in the list instead of plain text, if the need arises.

This could be handy if we wanted to highlight to the visitor the parts of the suggestion that matched with what they had typed in the <input> element. We will need the extension for this example, which can be found at https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js.

The file can be saved in our local js directory and a reference to it should be included on the page, after the source file for the autocomplete:

<script...