我正在制作一个带有自动填充功能的“令牌输入”样式复选框(用户输入内容,选择一个响应,在DOM视图中添加“令牌”).
使用jQuery自动完成,有没有办法在用户输入后添加不在源列表中的值？
例如,源看起来像[“苹果”,“橘子”,“香蕉”].用户在使用文本字段时键入“plums”.如果用户需要,有没有办法将“Plums”添加到源列表中？我知道有可以检查的选择和更改事件,但是只有在需要选择的地方时才选择(在这种情况下不存在),并且更改需要进行某种超时检查以验证用户是否已停止输入.
相反,是否有另一个插件我可以用来完成这种行为？
解决方法
这应该适用于自动完成的更改事件.此代码假定当您要将新项目添加到列表时,会出现一个带有id add的按钮.如果用户从列表中选择项目,则不会出现.可以进行一些调整,但这个概念证明应该可以：
var source = ["Apples","Oranges","Bananas"];
$(function () {
$("#auto").autocomplete({
source: function (request,response) {
response($.ui.autocomplete.filter(source,request.term));
},change: function (event,ui) {
$("#add").toggle(!ui.item);
}
});
$("#add").on("click",function () {
source.push($("#auto").val());
$(this).hide();
});
});
这是一个例子：http://jsfiddle.net/rmGqB/
更新：听起来我有点误解了要求.您还可以点击自动填充将填充候选列表的结果,并根据搜索结果是否产生任何完全匹配来提升按钮的可见性：
var source = ["Apples",response) {
var result = $.ui.autocomplete.filter(source,request.term);
$("#add").toggle($.inArray(request.term,result) < 0);
response(result);
}
});
$("#add").on("click",function () {
source.push($("#auto").val());
$(this).hide();
});
});
