cần có Gmail như functionailty - autocomplete jquery để bao gồm tên và địa chỉ email - trong chuỗi tìm kiếm

Question

Gần đây tôi đã hỏi câu hỏi này và đã trở lại một giải pháp tuyệt vời sử dụng jquery cho autocomplete:

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

Giải pháp là sử dụng cú pháp này:

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

});

tôi hiện đã tự động hoàn thành trên danh sách địa chỉ email và tôi cần thực hiện thêm một bước để ánh xạ lên chức năng giống như gmail nơi tôi bao gồm cả tên "thực" và địa chỉ email trong danh sách để người dùng có thể nhập tên hoặc địa chỉ email và nó sẽ tìm thấy mục nhập:

Vì vậy danh sách sẽ trông giống như thế này và người dùng có thể tìm kiếm bằng cách nhập "Firs.". hoặc "emailAdd ..."

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

Answer 1

Đợi một giây .. Bạn đã xem the demo? Tôi nghĩ rằng nó đã thực hiện chính xác điều này. Ví dụ: nếu tôi nhập "for" hoặc "jap" vào trường e-mail, cùng một người sẽ xuất hiện: Fornelia Marconi (với "jap" là một phần của địa chỉ email của cô ấy). Đây là mã cho phép điều này.

$("#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; 
    } 
}); 

Mảng các cặp tên-e-mail trông như thế này:

var emails = [ 
    { name: "Peter Pan", to: "peter@pan.de" }, 
    { name: "Molly", to: "molly@yahoo.com" } 
]; 

Answer 2

FYI, "autocomplete" Plugin này không còn trong phát triển, mỗi một ghi chú trên webiste:

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

jQuery plugin: Autocomplete

Lưu ý (2010-06-23): Plugin này bị không còn được dùng nữa và không được phát triển nữa. Người kế thừa của nó là một phần của giao diện người dùng jQuery, và hướng dẫn di chuyển này giải thích cách để nhận được từ plugin này đến một mới một. Trang này sẽ vẫn giữ nguyên là để tham khảo nhưng sẽ không được cập nhật nữa.

Vì vậy, nếu bạn muốn, bạn có thể sử dụng ví dụ so sánh sau đây từ autocomplete jQueryUI:

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

Cá nhân tôi thích jQuery Công cụ để jQueryUI/nhưng họ không cung cấp một plugin autocomplete tại điểm này ... ồ.