Created
December 17, 2013 12:45
-
-
Save Shaz3e/8004382 to your computer and use it in GitHub Desktop.
The character after @ in emails will trigger a dropdown of choices of popular email domains.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Email Domain Datalist Helper | |
Shows a list of suggestions after you've hit the @. | |
<label for="email">Email</label> | |
<input id="email" name="email" type="email" placeholder="your@email.com"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
background-color:#f1f1f1; | |
} | |
input[type=email] { | |
font-size: large; | |
width: 400px; | |
} | |
label { | |
display: block; | |
font-size: small; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
color: #999; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment