Домен после @ email

Подставляет домен после ввода собаки для поля email

by yoowordpress

HTML

<h1>Email Domain Datalist Helper</h1>

<p>Shows a list of suggestions after you&#39;ve hit the @.</p>

<p><label for="email">Email</label>
<input class="email" name="email" type="email" placeholder="[email protected]"></p>



<p><label for="email">Email</label>
<input class="email" name="email" type="email" placeholder="[email protected]"></p>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: large;
  max-width: 500px;
  margin: 0 auto;
}
input[type=email] {
  font-size: large;
  width: 400px;
}
label {
  display: block;
  font-size: small;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #999;
}

JavaScript

var EmailDomainSuggester = {
  
  domains: ["yahoo.com", "yandex.ru","yandex.ua","ya.ru","gmail.com", "mail.ru","gmail.com", "google.com", "hotmail.com", "aol.com", "googlemail.com", "msn.com", "facebook.com", "mail.com"],
  
  bindTo: $('.email'),
  
  init: function() {
    this.addElements();
    this.bindEvents();
  },
  

  
  addElements: function(e) {
  this.bindTo.each(function(i){
    // Create empty datalist
    var datalist = $("<datalist />", {
      id: 'email-options' + i
    }).insertAfter($(this));
    // Corelate to input
    $(this).attr("list", "email-options" + i);
    })
  },
  
  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();