JQuery UI Autocomplete - Display and Search Different Data

Question

I'm trying to make what should be a simple change to the way the jquery ui autocomplete operates.

Currently I am providing the source property with objects of the following format:

{label: "Display This", value: "Search This", other: "This is some other random data"}

As my example and title suggest, I would like to display different data in the drop down than what the user types in to search on. How is this possible? I'd rather not use Joe Schmoe's plugin.

Thanks!

Answer 1

Here's one way you could do this (assumes a local data source):

var source = [{label: "Display This", value: "Search This", other: "This is some other random data"}];

$("#auto").autocomplete({
    source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(source, function(value) {
            return matcher.test(value.value);
        }));
    }
});

Example: http://jsfiddle.net/dHFk8/ (search "Search")

If you're using a remote data source, then you can perform whatever search logic you'd like in the server-side code.