7

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

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

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

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

4

3 回答 3

10

这应该适用于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/

于 2012-06-11T17:37:58.550 回答
1

Andrew 提供的答案会导致 ADD 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/

于 2014-07-12T22:32:36.770 回答
0

老问题，但有用的答案：

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

$("#auto").autocomplete("option", "source", ["Apples","Oranges","Bananas","Plums"]);

见http://api.jqueryui.com/autocomplete/#option-source

于 2017-06-15T13:56:43.960 回答