Функция автозаполнения интерфейса JQuery не имеет соответствия или автозаполнения - PullRequest
Новая
       11

Функция автозаполнения интерфейса JQuery не имеет соответствия или автозаполнения

1 голос
/ 04 января 2012

Я использую последний виджет автозаполнения, который является частью последнего пользовательского интерфейса Jquery.Две вещи, которые мне нужны, это автозаполнение для заполнения текстового поля при вводе и способ сопоставления введенных значений со значениями в БД.Кто-нибудь знает, как это сделать с существующим автозаполнением?Спасибо

Ответы [ 3 ]

1 голос
/ 05 января 2012

Отказ от ответственности : Это будет работать только в современных браузерах с поддержкой input.setSelectionRange. Если вам нужно решение для старых браузеров, вам нужно найти кросс-браузерное решение.

Во всяком случае, вот как я бы подошел к этому: 

$(document).ready(function() {
    $("#auto").autocomplete({
        source: function(request, response) {
            /* autofill: */

            /* If using AJAX, place your AJAX request here */
            var results = $.ui.autocomplete.filter(src, request.term)
                , el = this.element[0];

            if (results.length) {
                el.value = results[0];

                /* This will not work < IE9 */
                el.setSelectionRange(request.term.length, el.value.length);
            }

            response(results);
        },
        change: function (event, ui) {
            /* mustmatch: */
            if (!ui.item) {
                this.value = '';
            }
        }
    });
});

Пример: http://jsfiddle.net/SgxyT/

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

С другой стороны, autofill потребует от вас использования функции в качестве source для автозаполнения, определения результатов и установки выбора на входе.

0 голосов
/ 04 января 2012

Вы видели эту ссылку http://jqueryui.com/demos/autocomplete/#remote-jsonp?

Вы можете указать страницу сервера в качестве источника данных. Он внутренне использует jquery ajax. 

  $("#txtSearchKey").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "getcityname.aspx?term=" + $("#txtSearchKey").val(),
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.CityName, value: item.CityId }
                            }));
                        }
                    });
                }
    });

У вас должна быть страница сервера (в этом примере, getcityname.aspx), которая считывает значение строки запроса и делает запрос к вашей базе данных, чтобы получить названия городов, начиная с того, что вы ввели в текстовое поле с идентификатором «txtSearchKey». Вы можете вернуть ответ с помощью response.write.

0 голосов
/ 04 января 2012

Вы должны написать серверный скрипт, который создает правильный запрос SQL и возвращает совпадающие строки в формате JSON, совместимом со спецификацией автозаполнения.

...