我刚刚将jQuery UI组合框添加到页面中.它似乎将选择限制为仅传入(或存在于选择列表中)的选择.我想要做的就是让用户输入一个不在选择列表中的值,然后将数据发送到服务器(在帖子上)并创建一个.我看不到任何禁用’验证’的选项.我该如何添加此功能？
– 编辑 –
我添加了代码以使自动完成工作时附加了一个按钮.但是,在调用Ajax方法时,这不起作用. Ajax方法正确返回json(颜色列表)但是当我开始输入’Re’时希望它会过滤掉包含Red的项目,但它没有.
这是我的代码：
var $colInput = $("#Colour").autocomplete({
source: function (request,response) {
$.ajax({
url: "/admin/stockitems/colours",dataType: "json",data: { id: null },success: function (data) {
var arr = [];
$.each(data,function (i,val) {
arr.push(val.Title);
});
response(arr);
}
});
},minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");
$("<button type='button'> </button>")
.attr("tabIndex",-1)
.attr("title","Show All Items")
.insertAfter($colInput)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function () {
// close if already visible
if ($colInput.autocomplete("widget").is(":visible")) {
$colInput.autocomplete("close");
return;
}
$(this).blur();
$colInput.autocomplete("search","");
$colInput.focus();
});
解决方法
组合框演示使用底层选择元素作为自动完成小部件的后备存储.我不建议将此形式用于允许用户输入他们想要的任何内容的表单.
但是,您可以自己模拟组合框效果,而不会有太多麻烦：
var $input = $("#tags").autocomplete({
source: availableTags,minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");
$("<button type='button'> </button>")
.attr("tabIndex",-1)
.attr("title","Show All Items")
.insertAfter($input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function() {
// close if already visible
if ($input.autocomplete("widget").is(":visible")) {
$input.autocomplete( "close" );
return;
}
$(this).blur();
$input.autocomplete("search","" );
$input.focus();
});
基本上,这是自动完成小部件的默认行为,以及一个将下拉所有选项的按钮.
