实时向jQuery自动填充添加值
我正在制作一个带有自动填充function的“令牌输入”样式复选框（用户输入内容，选择一个响应，在DOM视图中添加“令牌”）。
使用jQuery自动完成，有没有办法在用户输入后添加不在source列表中的值？
例如，源看起来像["Apples", "Oranges", "Bananas"] 。 用户在使用文本字段时键入"plums," 。 如果用户需要，有没有办法将“Plums”添加到源列表中？ 我知道有可以检查的select和change事件，但是只有在需要select时才选择（在这种情况下不存在），并且change需要进行某种超时检查以validation用户是否已停止输入。
相反，是否有另一个插件我可以用来完成这种行为？
这应该适用于autocomplete的更改事件。 此代码假定当您要将新项目添加到列表时，会出现一个带有id add的按钮。 如果用户从列表中选择项目，则不会出现。 可以进行一些调整，但这个概念certificate应该可以：
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", "Oranges", "Bananas"]; $(function () { $("#auto").autocomplete({ source: function (request, 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(); }); });
示例： http ： //jsfiddle.net/VLLuJ/
安德鲁提供的答案会导致ADD NEW按钮保留，即使用户随后从arrays中选择现有项目而不是添加“新”！
而不是在“添加”按钮上包含切换，在自动完成中有一个内置的.change函数可以使用。
虽然“更改”会等到文本框失去焦点，但这可能是一个更好的界面，如果没有与数组匹配则显示ADD BUTTON。 （或者可以创建添加的“确认”）。
如果用户从arrays中选择，请查看实际隐藏“添加按钮”的替代代码。 Andrew Whitaker的解决方案没有做的事：
$(function () { var source = ["Apples", "Oranges", "Bananas"]; $("#auto").autocomplete({ source: function (request, response) { var result = $.ui.autocomplete.filter(source, request.term); response(result); }, change: function( event, ui ) { var $label = $(this); // figure out the id of hidden input box from label id var $id = $('#'+this.id.replace('label_','id_')); if ( ui.item === null && $label.val() != '' ){ $("#add").show(); } if( ui.item != null && $label.val() != '' ){ $("#add").hide(); } } }); $("#add").on("click", function () { source.push($("#auto").val()); $(this).hide(); }); });
看我修改过的小提琴在行动 – http://jsfiddle.net/VLLuJ/25/
老问题，但有用的答案：
要更新自动完成源，请使用setter：
$（“＃auto”）。autocomplete（“option”，“source”，[“Apples”，“Oranges”，“Bananas”，“Plums”]）;
请参见http://api.jqueryui.com/autocomplete/#option-source