jQuery UI Autocomplete custom search

Question

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?

Possible duplicate of stackoverflow.com/questions/15846710/… — billyonecan
– billyonecan, Commented May 10, 2013 at 13:37
Yes and no. He has a more complex issue. Actually, the answer for my issue is in his question. :) — Adrian Marinica
– Adrian Marinica, Commented May 10, 2013 at 13:43

Claudio Redi · Accepted Answer · 2013-05-10 13:26:51Z

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)

answered May 10, 2013 at 13:26

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adrian Marinica Over a year ago

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!

Collectives™ on Stack Overflow

jQuery UI Autocomplete custom search

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related