Question

我正在制作一个带有自动填充功能的“令牌输入”样式复选框（用户输入内容，选择一个响应，在DOM视图中添加“令牌”）。

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

例如，来源看起来像["Apples", "Oranges", "Bananas"]。用户在使用文本字段时键入"plums,"。如果用户需要，有没有办法将“Plums”添加到源列表中？我知道我可以检查select和change个事件，但select仅在有选择的地方有效（在这种情况下不存在），change需要某种超时检查才能验证用户是否已停止输入。

相反，我可以用另一个插件来完成这种行为吗？

Answer 1

这应该适用于autocomplete的更改事件。此代码假定当您要将新项目添加到列表时，会出现一个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", "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/

Answer 2

Andrew提供的答案会导致ADD NEW按钮保留，即使用户随后从阵列中选择现有项目而不是添加“new”!!!

而不是在“添加”按钮上包含切换，而是在自动完成中有一个内置的.change函数可以使用。

虽然“更改”会等到文本框失去焦点，但这可能是一个更好的界面，如果没有与数组匹配则显示ADD BUTTON。（或者可以创建一个“确认”添加）。

如果用户从数组中选择，请查看实际隐藏“添加按钮”的替代代码。 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/

Answer 3

老问题，但有用的答案：

要更新自动完成源，请使用setter：

$（＆＃34;＃auto＆＃34;）。自动完成（＆＃34;选项＆＃34;，＆＃34;来源＆＃34;， [＆＃34;苹果＆＃34;＆＃34;桔子＆＃34;＆＃34;香蕉＆＃34;＆＃34;李子＆＃34;]）;

请参阅http://api.jqueryui.com/autocomplete/#option-source

实时向jQuery自动填充添加值

3 个答案: