用于电子邮件的 Jquery 自动完成功能答案

【问题标题】：Jquery Autocomplete for email用于电子邮件的 Jquery 自动完成功能
【发布时间】：2015-03-22 01:39:42
【问题描述】：

我尝试在包含所有收件人用户名的文本框上执行自动完成。用户名由分号“;”分隔文本框的 id 是“givenId”。

下面是我设计的文本框：

这是我的 jquery：

$(function () {
    $("#givenId").autocomplete({
        source: '@Url.Action("MVCfunction")',
    });
});

我现在的问题是：

1) 我一开始就选择了“jason”。

2) 然后当我尝试选择第二个用户时：

3) 它将 jason 替换为 kristy。

我的问题是如何在选择新用户后追加到文本框而不是替换用户？

我的预期结果是：

编辑于 2015 年 1 月 23 日*

*根据@Stephen Muecke 给出的演示找到了一个解决方案，查看下面的答案。 :)

【问题讨论】：

你看过demo中的代码了吗？一些进一步的例子here
如何将Url.Action放入demo中？
看看this demo
非常感谢兄弟，它现在可以工作了，我会为需要它的人更新这篇文章。

标签： c# jquery asp.net-mvc autocomplete

【解决方案1】：

这是我根据@Stephen Muecke 提供的演示找到的解决方案。

此答案用于具有多个值的 MVC 自动完成。

1)将此代码保留在脚本中。

$(function () {
        $("#givenId").autocomplete({
            source: '@Url.Action("MVCfunction")',
        });
    });

2) 并在下面添加这些代码：

[注：此代码取自http://jqueryui.com/autocomplete/#multiple ]

function split(val) {
        return val.split(/;\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }


    $("#givenId")
      // don't navigate away from the field on tab when selecting an item
      .bind("keydown", function (event) {
          if (event.keyCode === $.ui.keyCode.TAB &&
              $(this).autocomplete("instance").menu.active) {
              event.preventDefault();
          }
      })
      .autocomplete({
          minLength: 0,
          source: function (request, response) {
              // delegate back to autocomplete, but extract the last term
              response($.ui.autocomplete.filter(
                availableTags, extractLast(request.term)));
          },
          focus: function () {
              // prevent value inserted on focus
              return false;
          },
          select: function (event, ui) {
              var terms = split(this.value);
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push(ui.item.value);
              // add placeholder to get the comma-and-space at the end
              terms.push("");
              this.value = terms.join(";");
              return false;
          }
      });
});

【讨论】：