jquery ui автозаполнение сложного поиска с предварительными и последующими результатами - PullRequest
Новая
       7

jquery ui автозаполнение сложного поиска с предварительными и последующими результатами

4 голосов
/ 04 августа 2011

У меня есть поиск с использованием автозаполнения jquery ui, который прекрасно работает.В настоящее время я предварительно загружаю список городов и стран в формате json, чтобы он загружался быстро и не нуждался в опросе сервера.Однако теперь я хотел бы добавить к своему автозаполнению поиск определенных названий мест, т.е. в моем случае отели, рестораны и т. Д.

Мой вопрос заключается в том, должен ли я просто отказаться от предварительно загруженного списка городов и стран и сделатьобычный ванильный запрос к базе данных ajax? q = по мере их ввода, или это возможно, и было бы полезно иметь какой-то гибрид между ними.IE предварительно загруженный список, пока они не достигнут определенного количества символов или менее 5 результатов?

Это сэкономит время загрузки или просто будет головной болью?И если да, то как мне это сделать?

У меня изначально был запрос ajax, но я переключился на предварительно загруженный json, чтобы ускорить его.Полный список городов и стран крошечный, однако список мест большой.99,9% времени люди будут искать местоположения, а не конкретные места.

1 Ответ

4 голосов
/ 05 августа 2011

Как вы этого добьетесь:

Вы можете сделать что-то подобное, передав функцию в опцию source автозаполнения. В рамках этой функции вы выполняете некоторую логику, чтобы определить, нужно ли вам использовать вызов AJAX или просто отфильтровать данные на стороне клиента: 

$("#tags").autocomplete({
    source: function(request, response) {
        // This is how autocomplete finds matching results by default:
        var results = $.ui.autocomplete.filter(common, request.term);

        if (results.length < 5) {
            // Perform an ajax call.
            // In the success method, call response(results)
        } else {
            response(results);
        }
    }
});

Обе ваши идеи "гибридного" автозаполнения с использованием двух источников были интригующими. Однако во время тестирования решения я столкнулся с потенциальной проблемой юзабилити. Обычно с этим типом управления вы ожидаете получить меньше результатов при вводе.

Например: допустим, ваш локальный исходный массив выглядит так: 

['jquery', 'jquery-ui', 'jquery-ajax', 'jquery-plugins']

И вы используете стратегию показа большего количества результатов, например, после ввода 5 символов. После того, как пользователь введет j-q-u-e-r-y, ввод y вызовет вызов AJAX, заполняя список дополнительными результатами, что может быть непросто для пользователя в зависимости от вашего варианта использования.

Пример: http://jsfiddle.net/andrewwhitaker/wSBa3/

Я думаю, что это становится лучше, когда вы устанавливаете некоторое ограничение на количество результатов, которые могут возвращаться с сервера. Если вы синхронизируете это значение с минимальным количеством результатов до того, как произойдет вызов AJAX, взаимодействие не будет таким уж и веселым. Фактически, этот пример делает концепцию более правдоподобной для меня:

Пример: http://jsfiddle.net/andrewwhitaker/NxELC/

<ч />

Это того стоит?

Это сэкономит время загрузки или просто будет головной болью?

Может и то и другое!

Я думаю, что это действительно зависит от того, насколько ресурсоемким является запрос, какой объем данных мы говорим, а также от того, насколько приемлемым может быть подобное решение. Я не могу спекулировать на первых двух вариантах, но я бы сказал, что вы можете столкнуться с проблемой обслуживания с поддержкой двух списков. Эта проблема зависит от того, какую серверную технологию вы используете. Я думаю, если бы вы сделали это правильно, у вас не возникло бы никаких проблем.

Заранее извиняюсь за длинный ответ, но я надеюсь, что это поможет.

...