Автозаполнение пользовательского интерфейса jQuery - результаты не отображаются, если ввод не соответствует результирующему набору - PullRequest
Новая
       17

Автозаполнение пользовательского интерфейса jQuery - результаты не отображаются, если ввод не соответствует результирующему набору

3 голосов
/ 16 мая 2011

Краткая версия задачи

Автозаполнение работает, когда строка ввода соответствует строке результата, но не иначе.Данные успешно получены из JSON.

Более длинная версия

Я хочу динамически редактировать исходное содержимое автозаполнения с данными JSON.

Приведенный ниже подход работает, когда строка поиска совпадает с полями first_name и last_name.

Но URL-адрес JSON возвращает больше, например, при поиске по имени пользователя он по-прежнему возвращает правильные данные.Но это не показано при автозаполнении, и моя теория заключается в том, что при автозаполнении пользовательский интерфейс заставляет «входное значение» совпадать с «значением результата» .

Возвращает данные JSON: 

[
        {"pk": 1012912, "fields": {"first_name": "Barack", "last_name": "Obama"}}, 
        {"pk": 1017519, "fields": {"first_name": "George", "last_name": "Bush"}}
]

Код автозаполнения

Как видите, набор результатов устанавливается функцией поиска.

$('#search').autocomplete({
    source: [],
    search: function(event, ui){
        results = [];
        var json = jQuery.getJSON('http://jsondata.com?query='+event.target.value, function(data){
            for (var i=0; i<data.length; i++){
                results.push(data[i].fields.first_name + ' ' +data[i].fields.last_name); 
            };
        }).success(function(){
            $('#search').autocomplete('option', 'source', results);
            //The following debug proves that the 'results' are correct, even on search for usernames
            console.log(results);
        });
    },
});

Если я ищу «Барака Обаму» в поле #search, я получаю свои результаты, никаких проблем.Однако, если, скажем, у Барака Обамы было имя пользователя 'baracko', и я ищу его имя пользователя, то я получаю правильные результаты из JSON и в массиве результатов (как я проверял это с console.log), но результаты не отображаются.

У кого-нибудь есть идея, почему?

Решение для будущих гуглеров или тех, кто заинтересован

Благодаря некоторым подсказкам ek_ny, вот мой новый JSON: 

[{ 'value' : 'Barack Obama'}, { 'value' : 'George Bush'}]

А вот и код: 

$('#search').autocomplete({
    source: function(req, res){
        jQuery.getJSON('http://jsondata.com/?query='+req.term, req, function(data){  
            var results = [];
            $.each(data, function(i, val){
                results.push(val.value)
            });
            //Add results to callback       
            res(results);
        });           
    },
});

Ответы [ 2 ]

4 голосов
/ 16 мая 2011

Не знаю, поможет ли это, но я настроил автозаполнение немного по-другому.Я использую свойство source, которое позволяет мне контролировать обратный вызов jQuery.Мой вызов ajax возвращает элементы в виде [{"id": 1, "label": "Annie Hall", .....].Вы можете изменить результаты Ajax-вызова по своему усмотрению в зависимости от того, как данные возвращаются с сервера.Вот код, который я использую для его вызова. 

        $("#movieSearch").autocomplete({
            source: function(req, res){
                $.getJSON(
                    "search.aspx",
                    {term : req.term},
                    function(data){
                        res(data);//you can also modify your results before you call res()
                    }
                );
            }
);

Одна вещь в вашем примере, которая меня беспокоит, - это переменные результатов, которые мне кажутся глобальными переменными.И все мы знаем (по словам Дугласа Крокфорда), что глобальные переменные являются злом.

0 голосов
/ 20 ноября 2011

Это то, как вы обнаруживаете, когда нет результата 

source: function( request, response ) {
    $.getJSON( url, {
        term: extractLast( request.term )
    }, response )
    .error(function() {
        console.log("no results");
    });
},
...