Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>   
like image 943
leora Avatar asked Aug 19 '09 13:08

leora


1 Answers

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]" }
];
like image 107
montrealist Avatar answered Oct 11 '22 06:10

montrealist