Автозаполнение пользовательского интерфейса jQuery - использование значения многомерного массива в 'source', пример кеша - PullRequest
Новая
       4

Автозаполнение пользовательского интерфейса jQuery - использование значения многомерного массива в 'source', пример кеша

1 голос
/ 14 декабря 2011

Я пытаюсь изменить этот пример jQuery UI, чтобы он принимал двумерные данные JSON.http://jqueryui.com/demos/autocomplete/#remote-with-cache

    var cache = {}, lastXhr;
    $( "#birds" ).autocomplete({
        minLength: 2,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        }
    });

Как мне изменить это, чтобы использовать значение 'name' в данных JSON следующим образом: 

[{"name":"TEST1","slug":"blah-blah"},{"name":"TEST","slug":"example-slug-here"}]

1 Ответ

5 голосов
/ 14 декабря 2011

Виджет автозаполнения ожидает данные в следующем формате:

Локальные данные могут быть простым массивом строк или содержать Объекты для каждого элемента в массиве, с меткой или собственность или оба. Свойство метки отображается в предложении меню. Значение будет вставлено в элемент ввода после того, как пользователь выбрал что-то из меню. Если указано только одно свойство, будет использоваться как для

(акцент мой)

Это не значит, что вы не можете использовать удаленный источник, который не отвечает с этим форматом; Вы можете поменять данные в соответствии с этими требованиями перед вызовом поставляемой функции response.

Имея это в виду, я бы изменил пример для вашего случая следующим образом: 

lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
    cache[ term ] = $.map(data, function(item) {
        return {
            label: item.name,
            value: item.name,
            slug: item.slug,
            name: item.name
        };
    });
    if ( xhr === lastXhr ) {
        response( data );
    }
});

Это должно привести к тому, что результаты будут отображаться правильно (и кеширование должно работать нормально). Для другого примера этого, посмотрите пример удаленного JSONP .

...