Функционалността на JQuery UI AutoComplete няма съвпадение или автоматично попълване

Използвам най-новата джаджа за автоматично довършване, която е част от най-новия потребителски интерфейс на Jquery. Две неща, от които се нуждая, са автоматично попълване за попълване на текстовото поле, докато пиша, и начин за съпоставяне на въведените стойности със стойностите в DB. Някой знае ли как да направи това със съществуващото автоматично довършване? Благодаря


jquery jquery-ui jquery-ui-autocomplete
person Greg    schedule 04.01.2012    source източник
comment
ако искате AutoFill към вашето автоматично довършване, прочетете това: stackoverflow.com/questions/2933713/   -  person Snake Eyes    schedule 04.01.2012
comment
Това помага ли: stackoverflow.com /questions/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< /a>. Ако искате решение за по-стари браузъри, ще трябва да намерите решение за различни браузъри.

Както и да е, ето как бих подходил към това:

$(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), която чете стойността на низа на заявката и да се обадите на вашата база данни, за да получите имената на градовете, които започват с това, което сте въвели в текстовото поле с id "txtSearchKey". Можете да върнете отговора чрез response.write.

person Shyju    schedule 04.01.2012