Автозаполнение в jQuery 1.4.2 jQuery UI 1.8.3

Question

Я должен быть толстым, потому что я не могу на всю жизнь заставить работать автозаполнение jQuery. Я искал много примеров, и кажется, что большинство из них используют более старую версию jQuery. Я нашел один довольно хороший пример непосредственно с сайта пользовательского интерфейса jQuery: http://jqueryui.com/demos/autocomplete/#remote-jsonp Так что я смоделировал мой после этого примера. Когда я печатаю в поле ввода, под полем ввода появляется маленькое окно автозаполнения, но в поле автозаполнения ничего нет. Мои данные неправильно загружаются с помощью jQuery.

Мой источник данных - это URL, который возвращает данные JSON. Пример: [{"pk": 1, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "TBA"}}, {"pk": 2, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "UB 2008"}}]

Мой код Javascript:

$(document).ready(function() {
    $("input#id_location_address").autocomplete({
        max: 10,

        source: function(request, response) {               
            $.ajax({
                url: "/concierge/autocomplete/locations/",
                dataType: "json",
                data: request,
                success: function( data ) {
                    console.log( data )
                    response( data, function(item) {
                        return { label: item.address, value: item.address }
                    });
                }
            });
        }
    });
});

Так что когда я console.log(data) в Firebug, он показывает объект со всеми данными в такте. Я думаю, что я не обращаюсь к «адресу» должным образом в моем коде Javascript. Видите ли, я просто хочу, чтобы «адрес» всплывал в окне автозаполнения. Как мне это сделать?

Заранее спасибо,

Chris

Answer 1

Я понял это.Необходимо выполнить цикл по массиву объектов json, а затем поместить данные в массив.У меня появилась идея вернуть массив из примера JQuery UI defualt http://jqueryui.com/demos/autocomplete/#default

$('input#id_location_address').keyup( function() {
    $("input#id_location_address").autocomplete({
        source: function(request, response) {
            $.ajax({
                    url: "/concierge/autocomplete/locations/",
                    dataType: "json",
                    data: request,
                    success: function( data ) {
                        // loop through data and return as array
                        items = new Array();
                        for(item in data) items.push( data[item].fields.address );
                        response( items );
                    }
            });
        }
    });
});

Answer 2

попробуй

response($.map(data, function(item) {
    return {
        label: item.fields.address,
        value: item.fields.address
    }
}));

см. Источник этого демо

Answer 3

Попробуйте:

response($.map(data, function(item) {
    return {
        label: item.fields.address, // item.FIELDS ;)
        value: item.fields.address
    }
}));

Действительно, ответ ожидает массив в качестве аргумента. $ .map перебирает элементы данных и формирует новый массив возвращаемого значения из переданного метода мутатора. После этого $ .map возвращает новый массив, который будет аргументом response ().