Пользовательский интерфейс jQuery / автозаполнение - Как изменить имена переменных по умолчанию?

Question

jQuery UI Autocomplete использует имена переменных " value ", " id " и " label " для создания раскрывающегося списка. Например:

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

функция select: запускается, конечно, когда я щелкаю элемент в раскрывающемся списке. Однако у меня, похоже, нет никакого контроля над именем переменной ( ui.item.label ), которое она использует для заполнения раскрывающегося списка. То же самое применяется, когда я щелкаю по списку, и оно вводит значение ( ui.item.value ) в поле ввода.

Есть ли простой способ изменить имена переменных по умолчанию, которые используются для заполнения раскрывающегося списка и поля ввода?

• Причина этого в том, что я получаю данные JSON с удаленного сервера, над которым у меня нет контроля.

• Мне не хочется редактировать .js, поскольку вполне вероятно, что они будут регулярно выпускать новые версии .js.

• Что мне действительно нравится, так это возможность редактировать переменные и их содержимое между обратным вызовом с сервера и открытием раскрывающегося меню.

Спасибо за ваше время.

Answer 1

Я забыл написать свой ответ здесь. Я понял. В коде автозаполнения есть встроенный обработчик успеха. С его помощью вы можете извлечь переменные с сервера и связать их вместе в нужные (id, label, value). Используйте это так:

$("#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
    }
});