实时向jQuery自动填充添加值

Question

我正在制作一个带有自动填充功能的"令牌输入"样式复选框(用户输入内容,选择一个响应,在DOM视图中添加"令牌").

使用jQuery自动完成,有没有办法source在用户输入后添加不在列表中的值？

例如,一个源看起来像["Apples", "Oranges", "Bananas"].用户在"plums,"使用文本字段时键入.如果用户需要,有没有办法将"Plums"添加到源列表中？我知道有些东西select和change我可以检查的事件,但select只有在有东西要选择时才有效(在这种情况下不存在),并且change需要某种超时检查来验证用户是否已经停止输入.

相反,是否有另一个插件我可以用来完成这种行为？

Answer 1

这应该适用于autocomplete改变事件.此代码假定add当您要将新项目添加到列表时,会出现一个带有id的按钮.如果用户从列表中选择项目,则不会出现.可以进行一些调整,但这个概念证明应该可以:

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/