автозаполнение выпадающего списка в ячейке Infragistics ultrawebgrid - PullRequest
Новая
       25

автозаполнение выпадающего списка в ячейке Infragistics ultrawebgrid

0 голосов
/ 03 февраля 2010

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

элемент управления должен быть похож на следующий

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx

спасибо,

RK

1 Ответ

0 голосов
/ 08 апреля 2010

Я смог сделать что-то вроде того, что вы хотите. Вот что я сделал, но я не знаю, работает ли он в пакете Infragistics:

1 - Я загрузил текстовое поле автозаполнения JQuery UI 2 - Я немного изменил образец, приведенный на сайте. 3. Я применил что-то, чтобы изменить все мои выпадающие списки с именем XYZ для автоматического завершения. Я использовал делегата, поэтому, когда он генерирует выпадающий список в пользовательском интерфейсе, он автоматически заменяет мое текстовое поле автозаполнения.

Извините, если мой английский не идеален, это не мой родной язык.

вот некоторый код (Примечание: в примере я не использовал функцию live () или делегат ()): 

(function($) {
    $.widget("ui.autoCompleteDDL", {
        _create: function() {
            var self = this;
            var select = this.element.hide();
            var _isHoverUl = false;

            var input = $("<input>")
                .addClass("ig_Edit igtxt_Edit")
                .width(select.width())
                .addClass(select.attr("class"))
                .removeClass("AutoComplete DropDownList")
                .click(function(e){this.select(); })
                .insertAfter(select)
                .autocomplete({
                    source: function(request, response) {
                        var matcher = new RegExp(request.term, "i");
                        response(select.children("option").map(function() {
                            var text = $(this).text();
                            if (!request.term || matcher.test(text))
                                return {
                                    id: $(this).val(),
                                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                    value: text
                                };
                        }));
                    },
                    delay: 100,
                    select: function(e, ui) {
                        if (!ui.item) {
                            // remove invalid value, as it didn't match anything
                            $(this).val("");
                            return false;
                        }
                        $(this).focus();
                        select.val(ui.item.id);

                        self._trigger("selected", null, {
                            item: select.find("[value='" + ui.item.id + "']")
                        });

                    },
                    minLength: 1
                })
                .blur(function(e){
                        var curInput= $(this);
                        if (!_isHoverUl){
                            setTimeout(function(){
                                curInput.val(select.get(0).options[select.get(0).selectedIndex].text);
                                input.autocomplete("close");
                            }, 150); // 150 is because of the autocomplete implementation.
                        }
                    });

            // Fix for the scrollbar in IE7/8
            $("body")
                .delegate(".ui-autocomplete", "mouseover", function(evt){ _isHoverUl = true;})
                .delegate(".ui-autocomplete", "mousemove", function(evt){input.focus();})
                .delegate(".ui-autocomplete", "mouseout", function(evt){_isHoverUl = false;});

            // Possibility of showing an arrow button.
            $("<div>&nbsp;</div>")
            .insertAfter(input)
            .addClass("ui-icon-combo-arrow")
            .mouseover(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); })
            .mouseout(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); })
            .removeClass("ui-corner-all")
            .css({"display":"inline"})
            .position({
                my: "left center",
                at: "right center",
                of: input,
                offset: "-1 0"
            })
            .attr("title", "")
            .click(function() {
                // close if already visible
                if (input.autocomplete("widget").is(":visible")) {
                    input.autocomplete("close");
                    return;
                }
                // pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
                input.focus();
            });

            input.val(select.get(0).options[select.get(0).selectedIndex].text);
        }
    });

})(jQuery);

$(function() {
    $("select.AutoComplete").autoCompleteDDL();
});

Надеюсь, это помогло

...