Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
666 views
in Technique[技术] by (71.8m points)

search - 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>   
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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]" }
];

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...