Javascript 如何使用域自动完成电子邮件地址

我想做自动完成功能的电子邮件像这个自动填写电子邮件

我已尝试使用自动完成电子邮件地址进行此操作，但失败

此代码的My JS编写如下：

var EmailDomainSuggester = {

  domains: ["yahoo.com", "gmail.com", "google.com", "hotmail.com", "me.com", "aol.com", "mac.com", "live.com", "comcast.com", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk", "facebook.com", "verizon.net", "att.net", "gmz.com", "mail.com"],

  bindTo: $('#email'),

  init: function() {
    this.addElements();
    this.bindEvents();
  },

  addElements: function() {
    // Create empty datalist
    this.datalist = $("<datalist />", {
      id: 'email-options'
    }).insertAfter(this.bindTo);
    // Corelate to input
    this.bindTo.attr("list", "email-options");
  },

  bindEvents: function() {
    this.bindTo.on("keyup", this.testValue);
  },

  testValue: function(event) {
    var el = $(this),
        value = el.val();

    // email has @
    // remove != -1 to open earlier
    if (value.indexOf("@") != -1) {
      value = value.split("@")[0];
      EmailDomainSuggester.addDatalist(value); 
    } else {
      // empty list
      EmailDomainSuggester.datalist.empty();
    }

  },

  addDatalist: function(value) {
    var i, newOptionsString = "";
    for (i = 0; i < this.domains.length; i++) {
      newOptionsString += 
        "<option value='" + 
          value + 
          "@" +
          this.domains[i] +
        "'>";
    }

    // add new ones
    this.datalist.html(newOptionsString);
  }

}

EmailDomainSuggester.init();

var-EmailDomainSuggester={
域名：[“yahoo.com”、“gmail.com”、“google.com”、“hotmail.com”、“me.com”、“aol.com”、“mac.com”、“live.com”、“comcast.com”、“googlemail.com”、“msn.com”、“hotmail.co.uk”、“yahoo.co.uk”、“facebook.com”、“verizon.net”、“att.net”、“gmz.com”、“mail.com”]，
bindTo:$（“#电子邮件”），
init:function（）{
这个。加法器（）；
这是bindEvents（）；
},
加法器：函数（）{
//创建空数据列表
this.datalist=$（“”{
id:“电子邮件选项”
}).insertAfter（this.bindTo）；
//Corelate输入
this.bindTo.attr（“列表”、“电子邮件选项”）；
},
bindEvents:function（）{
this.bindTo.on（“keyup”，this.testValue）；
},
testValue:函数（事件）{
var el=$（此），
value=el.val（）；
//电子邮件@
//删除！=-1以较早打开
if（value.indexOf（“@”）！=-1）{
value=value.split（“@”）[0]；
EmailDomainSuggester.addDatalist（值）；
}否则{
//空列表
EmailDomainSuggester.datalist.empty（）；
}
},
addDatalist:函数（值）{
var i，newoptionString=“”；
对于（i=0；i

我的HTML代码片段如下所示：

 <label for="email">Email</label>
 <input id="email" name="email" type="email" placeholder="your@email.com">

电子邮件

当我写作时，它并没有显示出建议。 但当我一个接一个地删除角色时，它就起作用了

它在我键入时不显示建议，但在我删除时显示

---

请在“@”后逐个输入字符。

请发布一个工作段检查此链接@MarcoSalernoWorks很好..它对我有效。请发布一个工作段检查此链接@MarcoSalernoWorks很好..它对我有效。