jQuery UI多值自动补全：添加用户自定义文本选择功能求助

我明白你想要的效果：除了预设的标签列表，用户手动输入的内容也能像选中下拉选项一样，被添加成输入框里的标签项。咱们来修改现有代码实现这个功能：

修改后的完整代码 #

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",
    "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
    "Ruby", "Scala", "Scheme"
  ];

  function split(val) {
    return val.split(/,\s*/);
  }

  function extractLast(term) {
    return split(term).pop();
  }

  function addNewTag(inputElement, newTag) {
    // 过滤空标签
    if (!newTag.trim()) return;
    var terms = split(inputElement.value);
    // 移除当前输入的待处理项
    terms.pop();
    // 添加新标签
    terms.push(newTag.trim());
    // 保留末尾的逗号空格格式，方便继续输入
    terms.push("");
    inputElement.value = terms.join(", ");
  }

  $("#tags")
    // 处理tab和回车事件
    .on("keydown", function(event) {
      var autocompleteInstance = $(this).autocomplete("instance");
      // 保留原tab事件逻辑，防止选中项时跳转页面
      if (event.keyCode === $.ui.keyCode.TAB && autocompleteInstance.menu.active) {
        event.preventDefault();
      }
      // 新增：回车时，若下拉菜单未激活，就把当前输入内容添加为标签
      if (event.keyCode === $.ui.keyCode.ENTER && !autocompleteInstance.menu.active) {
        event.preventDefault();
        var lastTerm = extractLast($(this).val());
        addNewTag(this, lastTerm);
      }
    })
    .autocomplete({
      minLength: 0,
      source: function(request, response) {
        response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
      },
      focus: function() {
        // 聚焦时不自动插入下拉项内容，保持原输入状态
        return false;
      },
      select: function(event, ui) {
        // 选中下拉项时，调用统一的标签添加逻辑
        addNewTag(this, ui.item.value);
        return false;
      }
    });
});

关键修改点说明 #

• 封装addNewTag函数：把添加标签的逻辑抽离成通用函数，不管是选中预设下拉项还是用户自定义输入，都用同一套逻辑处理，避免代码冗余。
• 新增回车键处理逻辑：当用户按下回车且下拉菜单未激活时，说明用户想把自己输入的内容作为新标签，此时提取当前输入的最后一段文本，调用添加函数完成操作。
• 优化select事件：将原来的选中逻辑迁移到通用函数中，让代码更简洁易维护。

这样修改后，用户既能选择预设标签，也可以输入任意内容按回车添加成新标签，完全满足你想要的功能需求。

内容的提问来源于stack exchange，提问作者user3352055