自动补全下拉菜单在Insecurs超网络网格单元中

Question

我想要一个自动完成下拉控件，在编辑模式下，这样用户可以键入数据和值是自动填写的，如果存在，无效的数据应该是不允许的。这个是可能的吗？我不想使用webcombo，它太重了，而且我不需要多列的下拉列表。我想要一个简单的下拉列表，但为用户输入的能力，就像谷歌建议，但所有的值缓存在客户端，没有往返到服务器上的每一次击键。

该控件应如下所示

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

谢谢,

RK

Answer 1

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

1-我下载了JQuery UI自动填充文本框2-我修改了网站上给出的示例。3-我应用了一些东西来修改我所有的dropdown，有一个名为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();
});

我希望这对你有所帮助