1

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?

Adrian Marinica
  • 2,191
  • 5
  • 29
  • 53

1 Answers1

3

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)

Claudio Redi
  • 67,454
  • 15
  • 130
  • 155
  • That's what happens when you jump into the code without researching the docs. Missed the whole part about the `label` and `value` attributes. Used the first solution, since the second one did not really apply (I have a more complex actual situation that this example). Thanks! – Adrian Marinica May 10 '13 at 13:42