Question

jQuery UI Autocomplete uses the variable names “value“, “id” and “label” to create the drop down list. For example:

$("#cities").autocomplete({
    source: "backend/cities.php",
    minLength: 2,
    select: function(event, ui) {
        city = ui.item.id;
        region = ui.item.label;
        country = ui.item.value;
    }
});

the select: function is of course run when I click an item in the drop down list. However, I do not seem to have any control of the variable name (ui.item.label) it uses to populate the drop down list. The same applies when I click in the list and it enters the value (ui.item.value) into the input field.

Is there any easy way to change the default variable names that it uses to populate the drop down list and the input field?

• The reason for this is that I am getting the JSON data from a remote server over which I have no control.

• I don’t feel like editing the .js since it’s probable that they’ll release new versions of the .js regularly.

• What I’d really like is to be able to edit the variables and their content between the callback from the server and the opening of the drop down menu.

Thank you for your time.

Answer 1

I forgot to write my answer here. I figured it out. There’s a built-in success-handler in the autocomplete code. With it you can fetch the variables from the server and bundle them together into the proper ones (id, label, value). Use it like this:

$("#cities").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function(data) {
                response($.map(data.geonames, function(item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name
                    }
                }))
            }
        })
    },
    minLength: 2,
    select: function(event, ui) {
        // when clicked in list
    },
    open: function() {
        // triggered when the list is opened
    },
    close: function() {
        // triggered when the list is hidden
    }
});