Jquery 电子邮件自动完成

Question

我正在尝试对包含所有收件人用户名的文本框执行自动完成。用户名以分号“;”分隔文本框的 ID 是 "givenId".

下面是我设计的文本框：

这是我的 jquery:

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

我现在的问题是：

1) 我首先 selected "jason"。

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

3) 将 jason 替换为 kristy。

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

我的预期结果是：

2015 年 1 月 23 日编辑*

*根据@Stephen Muecke给出的demo找到解决方案，查看下方答案。 :)

Answer 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;
          }
      });
});

Jquery 电子邮件自动完成

Jquery Autocomplete for email

c#

jquery

asp.net-mvc

autocomplete