Пример автозапроса jQuery

Question

Мне нужно реализовать функцию «автозаполнения» на нашем сайте, но для этого нужно повторно запрашивать каждое нажатие клавиши после определенного количества клавиш (как и для каждого символа после 2, потребуется повторный запрос). Таким образом, результат не является ограничивающим поиском. Например, плагины автозаполнения, которые я видел, работают следующим образом:

[ищет округ] 1. Типы клиентов «CA» и первый результат вернут «Канада», «Камбоджа» и «Камарон» 2. клиент продолжает вводить и нажимает «М», новые результаты будут запрашиваться только в пределах существующих 3 результатов (производя результаты только «Камбоджа» и «Камарон»)

Мне нужно решение, которое было бы эквивалентно запросу моего источника данных при каждом нажатии клавиши. У меня уже есть вызов ajax, который вернет мои результаты на основе «типизированных» параметров. Например (в приведенном выше примере), он должен был бы сделать ajax-вызов сначала с передачей 'ca', и если клиент продолжал вводить 'can' на 3 символа и т. Д.

Спасибо.

Answer 1

Плагин автозаполнения пользовательского интерфейса jQuery сделает то, что вы хотите.

См. Эту демонстрацию http://jqueryui.com/demos/autocomplete/#remote-jsonp

код для демонстрации:

$("#city").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) {
                log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");


}
        });

Вы можете использовать компоновщик загрузки , чтобы получить только пример автозаполнения. В качестве бонуса автозаполнение доступно для темы, и вы можете выбрать themeroller готовую тему или отредактировать и создать свою собственную.

Answer 2

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