Question

I recently asked this question and got back a great solution using jquery for autocomplete:

Need a good way for user to select "To" for email sending

The solution was to use this syntax:

$("#suggest3").autocomplete(someArray, {
    multiple: true,
    mustMatch: true,
    autoFill: true

});

i now have autocomplete on a list of email addresses and i need to take it one step further to map onto gmail like functionality where i include both the “real” name and the email address in the list so users can enter either the name or the email address and it will find the entry:

So the list would look similar to this and the user can search by typing “Firs . . .” or “emailAdd…”

"First Last" <emailAddress>   
"First1 Las1t" <emailAddress1>   
"First2 Last2" <emailAddress2>   

Answer 1

Wait a second.. Did you look at the demo? I think it already does exactly this. For instance, if I type in “for” or “jap” into the e-mail field, the same person shows up: Fornelia Marconi (with “jap” being part of her e-mail address). Here is the code that enables this.

$("#thickboxEmail").autocomplete(emails, {
    minChars: 0,
    width: 310,
    matchContains: true,
    highlightItem: false,
    formatItem: function(row, i, max, term) {
        return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: &lt;" + row.to + "&gt;</span>";
    },
    formatResult: function(row) {
        return row.to;
    }
});

The array of name-e-mail pairs looks like this:

var emails = [
    { name: "Peter Pan", to: "[e-mail]" },
    { name: "Molly", to: "[e-mail]" }
];