Infragistics ultrawebgrid单元格中的自动完成下拉列表
问题描述:
我想要在编辑模式下的ultrawebgrid单元格中使用自动完成下拉控件,因此用户可以输入数据,并且如果存在数据,则自动填充值,不应允许使用无效数据。这可能吗?我不想使用webcombo,它太重了,我不需要多列下拉菜单。我想要一个简单的下拉列表,但用户输入的能力就像Google建议的一样,但所有值都缓存在客户端上,每次击键时都不会往返服务器。Infragistics ultrawebgrid单元格中的自动完成下拉列表
控制应该是以下一个
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx
感谢状,
RK
答
我已经能够做到像你想要什么。这里是我所做的,但我不知道它是否适用于Infragistics包:
1-我下载了JQuery UI自动填充文本框 2-我修改了一点点在网站上给出的示例。 3-我申请了一些东西来修改我的下拉列表中有一个名为XYZ的类,用于自动完成。我使用了一个委托,因此当它在UI上生成一个下拉列表时,它会通过自动填充文本框自动替换它。
对不起,如果我的英语不完美,这不是我的第一语言。
这里的一些代码(注意:在示例中,我没有使用现场()或委托()函数):
(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> </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();
});
我希望这有助于