Infragistics ultrawebgrid 单元格中的自动完成下拉菜单

Question

我想在编辑模式下在 ultrawebgrid 单元格中自动完成下拉控件，以便用户可以键入数据，如果存在值会自动填写，不应允许无效数据。这可能吗？我不想使用 webcombo，它太重了，我不需要多列下拉菜单。我想要一个简单的下拉列表，但用户可以像 Google 建议的那样输入，但所有值都缓存在客户端上，每次击键时都没有到服务器的往返。

控件应该如下所示

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

谢谢，

RK

Answer 1

我已经能够完成您想要的事情。这是我所做的，但我不知道它是否适用于 Infragistics 包：

1- 我下载了 JQuery UI 自动填充文本框 2-我对网站上给出的样本进行了一些修改。 3-我应用了一些东西来修改我所有的下拉列表，其中有一个名为 XYZ 的类用于自动完成。我使用了一个委托，所以当它在 UI 上生成一个下拉列表时，它会自动将其替换为我的自动填充文本框。

对不起，如果我的英语不完美，它不是我的第一语言。

这里有一些代码（注意：在示例中我没有使用 live() 或 delegate() 函数）：

(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();
});

希望对你有帮助