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

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


jquery jquery-ui jquery-ui-autocomplete
person Greg    schedule 04.01.2012    source источник
comment
если вы хотите использовать автозаполнение для автозаполнения, прочитайте это: stackoverflow.com/questions/2933713/   -  person Snake Eyes    schedule 04.01.2012
comment
Помогает ли это: stackoverflow.com /вопросы/3689405/ ?   -  person j08691    schedule 04.01.2012
comment
Извините, я не ясно выразился. У меня есть рабочий виджет автозаполнения, использующий пользовательский интерфейс jquery и возвращающий данные в формате JSON из контроллера MVC 3. Все работает. Что я хочу добавить, так это возможность дополнять слово по мере его ввода (автозаполнение) и запрещать значения, которых нет в базе данных.   -  person Greg    schedule 04.01.2012

Ответы (3)


arrow_upward
1
arrow_downward

Отказ от ответственности: это будет работать только в современных браузерах с поддержкой 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 для автозаполнения, определения результатов и установки выбора на входе.

person Andrew Whitaker    schedule 05.01.2012

arrow_upward
0
arrow_downward

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

person kaz    schedule 04.01.2012

arrow_upward
0
arrow_downward

Вы видели эту ссылку 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.

person Shyju    schedule 04.01.2012