CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Adrian Marinica
Adrian Marinica

Reputation: 2201

jQuery UI Autocomplete custom search

I currently use the jQuery UI Autocomplete in my application and I wanted to customize the design of the results, by turning the last word in the result a different color (say blue). For this I have used http://jqueryui.com/autocomplete/#custom-data as follows:

$(input).autocomplete(config)
        .data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $("<li>").append("<a>" + item.label + " " + "<span class=\"blue\">" + item.explicitLabel + "</span>" + "</a>").appendTo(ul);
                };

Where item.label is the autocomplete result without the last word and item.explicitLabel is the last word. The only problem I have is, when searching, the last word (explicitLabel) is ignored. Here is an example: http://jsfiddle.net/japZB/. What do I need to do to be able to search in the full output result?

Upvotes: 1

Views: 1245

Answers (1)

Claudio Redi
Claudio Redi

Reputation: 68400

The more direct an easy way would be adding an extra field for full text

var list = [];
list.push({
  label: "This is a good test", partialLabel: "This is a good", explicitLabel: "test" 
});
list.push({
  label: "This is a bad test", partialLabel: "This is a bad", explicitLabel: "test" 
});
list.push({
 label: "This is a bad nice day", partialLabel: "This is a nice", explicitLabel: "day" 
});

But this is an overkill in my opinion. If you own the source list format you could have something as simple as this

var list = [];
list.push("This is a good test");
list.push("This is a bad test");
list.push("This is a bad nice day");

And get last word from string to color it using string manipulation. lastIndexOf would help to get last white space occurence (if any)

Upvotes: 3

Related Questions