need gmail like functionailty - jquery autocomplete to include names and email addresses - in string searching

Question

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

http://stackoverflow.com/questions/1297518/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: "[email protected]" },
    { name: "Molly", to: "[email protected]" }
];

Answer 2

FYI, This "autocomplete" plugin is no longer in development, per a note on the webiste:

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

jQuery plugin: Autocomplete

Note (2010-06-23): This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI, and this migration guide explains how to get from this plugin to the new one. This page will remain as it is for reference, but won’t be updated anymore.

So if you want, you can use the following comparable example from the jQueryUI autocomplete:

http://jqueryui.com/demos/autocomplete/#multiple-remote

I personally prefer jQuery Tools to jQueryUI / but they don't offer an autocomplete plugin at this point... oh well.