mailcheck demo

by Dimitar Christoff

HTML

<script src="https://rawgit.com/DimitarChristoff/mailcheck/master/Source/string-distance.js"></script>
<script src="https://rawgit.com/DimitarChristoff/mailcheck/master/Source/mailcheck.js"></script>
<input type="email" value="" placeholder="eg, [email protected]" id="email" />

<p>
p.s. this fiddle may break in IE due to github resources content type for .js not being correct
</p>
<h2>Near-miss typos in the following domains are being auto-suggested by default</h2>

<pre></pre>

CSS

body {
    font-size: 12px;
    font-family: verdana, arial;
}
#email {
    width: 290px;
    padding: 5px;
}

div.hint {
    width: 300px;
    text-align: right;
    font-size: 11px;
}

p {
    color: red;
    margin-top: 40px;
}

JavaScript

document.id("email").addEvent("change", function() {
    // create a class instance if it does not exist, get suggestions...
    var suggested = this.get("mailcheck").suggest(), self = this;
    
    // have a hint div underneath
    var hint = this.retrieve("hint") || new Element("div.hint", {
        events: {
            "click:relay(a.confirm)": function(e) {
                e & e.stop();
                self.set('value', this.get('text'));
                hint.empty();
            }
        }
    }).inject(this, 'after');
    this.store("hint", hint);
    
    // now see what is being suggested
    if (suggested) {
        hint.set('html', 'Did you mean <a href="#" class="confirm">{full}</a>?'.substitute(suggested));
    }
    else {
        // we have nothing!
        hint.empty();
    }
});    

document.getElement("pre").set("html", Mailcheck.prototype.options.domains.join("\n"));