Autocomplete Infragistics ultrawebgrid单元中的自动完成下拉列表

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

控件应该与下面的控件类似

谢谢

---

RK

我已经能够完成你想要的事情。以下是我所做的，但我不知道它是否适用于基础设施包：

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

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

下面是一些代码（注意：在示例中，我没有使用live（）或delegate（）函数）：

（函数（$）{
$.widget（“ui.autoCompleteDDL”{
_创建：函数（）{
var self=这个；
var select=this.element.hide（）；
var_isHoverUl=假；
变量输入=$（“”）
.addClass（“ig\U编辑igtxt\U编辑”）
.width（选择.width（））
.addClass（选择.attr（“类”））
.removeClass（“自动完成下拉列表”）
.单击（函数（e）{this.select（）；}）
.insertAfter（选择）
.自动完成({
来源：功能（请求、响应）{
var matcher=new RegExp（request.term，“i”）；
响应（select.children（“option”）.map（函数（）{
var text=$（this.text（）；
if（！request.term | | matcher.test（text））
返回{
id:$（this.val（），
标签：text.replace（新RegExp（（？！[^&；]+；）（？！（？！[^&；]+；）），“gi”），“$1”，
值：文本
};
}));
},
延误：100，
选择：功能（e、ui）{
如果（！ui.item）{
//删除无效值，因为它与任何内容都不匹配
$（此）.val（“”）；
返回false；
}
$（this.focus（）；
选择.val（ui.item.id）；
自触发（“选定”，空{
项：选择.find（“[value=”+ui.item.id+“]”）
});
},
最小长度：1
})
.blur（函数（e）{
var curInput=$（此值）；
如果（！\u isHoverUl）{
setTimeout（函数（）{
curInput.val（select.get（0）.options[select.get（0）.selectedIndex].text）；
输入。自动完成（“关闭”）；
}，150）；//150是因为自动完成实现。
}
});
//修复IE7/8中的滚动条
$（“正文”）
.delegate（“.ui自动完成”，“鼠标悬停”，函数（evt）{{u isHoverUl=true；}）
.delegate（“.ui自动完成”，“mousemove”，函数（evt）{input.focus（）；}）
.delegate（“.ui自动完成”，“mouseout”，函数（evt）{{u isHoverUl=false；}）；
//显示箭头按钮的可能性。
$(" ")
.insertAfter（输入）
.addClass（“ui图标组合箭头”）
.mouseover（function（）{$（this）.toggleClass（“ui图标组合箭头ui图标组合箭头”）；}）
.mouseout（function（）{$（this）.toggleClass（“ui图标组合箭头ui图标组合箭头”）；}）
.removeClass（“用户界面角全部”）
.css（{“显示”：“内联”}）
.职位({
我的：“左中锋”，
在“右中”，
其中:投入,，
偏移量：“-10”
})
.attr（“标题”、“名称”）
。单击（函数（）{
//如果已经可见，请关闭
如果（input.autocomplete（“小部件”）为（“：可见”））{
输入。自动完成（“关闭”）；
回来
}
//将空字符串作为要搜索的值传递，显示所有结果
input.autocomplete（“搜索”和“）；
input.focus（）；
});
input.val（select.get（0）.options[select.get（0）.selectedIndex].text）；
}
});
})（jQuery）；
$（函数（）{
$（“select.AutoComplete”）.autoCompleteDDL（）；
});

我希望这有帮助

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