jQuery Email Address Input

Question

I\'d like an autocomplete/autoformat \"To\" field on my web site that works like the one in GMail.

Does anyone know of such a thing for jQuery?

Plain JavaScr

Answer 1

There are lots and lots of jquery bits that do this, you can google for "jquery autocomplete" and see which you like best.

Here's one that is more famous: http://docs.jquery.com/Plugins/AutoComplete

<script>
    var emails = [
        { name: "Kitty Sanchez", to: "kanchez@bluth.com" },
        { name: "Lucille Austero", to: "lucille2@balboatowers.net" },
        { name: "Bob Loblaw", to: "bloblaw@bobloblawlawblog.com" },
        { name: "Sally Sitwell", to: "sally@sitwell.org" }
    ];

    $(document).ready(function(){
        $("#Recipients").autocomplete(emails, {
            multiple: true,
            minChars: 1,
            matchContains: "word",
            autoFill: false,
            formatItem: function(row, i, max) {
                return "\"" + row.name + "\" &lt;" + row.to + "&gt;";
            },
            formatMatch: function(row) {
                return row.name + " " + row.to;
            },
            formatResult: function(row, i, max) {
                return "\"" + row.name + "\" <" + row.to + ">";
            }
        });
    });
</script>

Answer 2

These answers are fine but I think he's looking for something email specific. Gmail's email auto complete is very robust and smart taking into account like who you email most often and other factors.

Answer 3

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Check out this plugin. It appears to be quite robust and stable and may meet your needs. jQuery is a perfect choice for the kind of effect your seeking. Just keep in mind that, depending on where you want to get your data from, you'll need to create some sort of ajax/php backend.