使用jquery，我如何處理標籤的方式與Live Mail處理電子郵件地址的方式相同？

Question

我需要一個類似標籤的系統，其操作方式與Live Mail的電子郵件地址非常相似。

對於那些不知道的人，Live Mail提供了一個textbox，您可以在其中輸入電子郵件地址。在完成電子郵件地址的輸入後，Live Mail會將地址從純文本轉換爲具有邊框並具有文本的div。如果您想刪除地址，則將鼠標懸停在地址上，並在右側顯示一個十字。已經「標記」後，您無法更改地址。如果你想改變它，你需要刪除它並重新添加它。

這是我需要的功能，除了我會用標記而不是電子郵件地址來做這件事。

我想知道是否有人知道這種方式工作的jQuery組件。

歡呼聲中，安東尼

Answer 1

jquery facebook autocomplete（通過Ajaxian）

有一本書上Jquery 1.6 UI有一個自動完成的電子郵件以及onle的自動完成的（book source code）的最後一個例子。

Answer 2

我從來沒有聽說過這樣的jQuery插件，但它不應該太難實現你自己的。但是，它會需要一些關於CSS的知識，以確定實際的外觀。

// Code for replacing a textbox with a DIV on blur. 
$('#textbox').blur(function() { 
    var content = $(this).val(); 
    if (!content) return; // Don't make anything out of empty textboxes. 
    // Create a DIV and make it a sibling to the textbox. 
    $('<div>').html(content).appendTo($(this).parent()); 
    // Remove the textbox. 
    $(this).remove(); 
}); 

我還沒有測試任何這種方式，但這應該讓你在正確的軌道上。

HTH！