JQueryUI Autocomplete doesn’t provide much in the way to style by default, but it’s easy to add tags to style the terms and completions seperately.
Most sites with autocomplete make the completions bold, emphasizing what parts have been added on. The HTML constructed by JQueryUI’s autocomplete isn’t structured for this, but we can add it with a hook in autocomplete’s open event:
open: function (e, ui) {
var term = $("#query").val();
// for JQueryUI >= 1.10, use "uiAutocomplete" instead of "autocomplete"
var acData = $(this).data("autocomplete");
acData.menu.element.find("a").each(function () {
var a = $(this);
var completion = a.text().substring(term.length);
a.html("" + term + "" + "" + completion + "");
});
Try it live on jsfiddle.net
This adds two new classes, ui-autocomplete-term and ui-autocomplete-completion that can be styled as necessary. The fiddle also makes use of Opensearch suggestions, which I discussed in a previous post.
This is based off of a StackOverflow answer, I added classes for both the term and the completion.