CODEWITHSUNDEEP
jquery-uiautocompletejquery-ui-autocomplete
user48545
user48545

Reputation: 3421

Set the value and display property for jquery's autocomplete source

I've got a remote source which does not return id and value or label. How can I use it as a source for jquery's autocomplete plugin?

Upvotes: 2

Views: 832

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

You should pass source a function that makes the AJAX request manually, and then performs some post-processing on the returned data:

source: function(request, response) {
    $.ajax({
        url: url,
        data: request,
        dataType: "json",
        success: function(data) {
            var processedData = $.map(data, function(item) {
                return {
                    value: item._your_property, // Property you want to use for "value"
                    label: item._another_property // Property you want to use for "label"
                }
            });
            response(processedData);
        },
        error: function() {
            response([]);
        }
    });
}

Basically, use $.map to turn the array you get back into an array of objects that the autocomplete widget supports.

For a working example, check out the JSONP example on jQueryUI's demo page.

Upvotes: 3

Related Questions