做一個UL作爲輸入

Question

我想在此的jsfiddle做出UL作爲輸入，如：http://jsfiddle.net/hailwood/u8zj5/

（但我不想使用tagit，我想自己實現它）

我想用戶可以在輸入中寫入內容，當他按下回車鍵時，帶有X按鈕的li將被插入到輸入中。

我真的不知道如何實現它。

如果我知道如何將ul作爲輸入，我會知道如何去做。

請幫我：

假設我有UL：

<ul id="countries"></ul> 

我想使其可寫像jsfiddle我上面給了。

，然後它應該是這樣的：

$('#countries').keypress(function(e) { 
    if(e.which == 13) { 
     var value; // here I have to get the value of the input 
     // insert the li to the ul: 
     $('#countries').append('<li value="1">' + value + 
         '&nbsp;&nbsp;<span class="closeButton">X</span></li>'); 
    } 
}); 

$('.closeButton').live('click', function(){ 
    $(this).parent().remove(); 
}); 

任何幫助表示讚賞！

Answer 1

使用contenteditable。

<ul id="countries" contenteditable="true"></ul> 

http://www.w3schools.com/tags/att_global_contenteditable.asp

Answer 2

這是什麼意思？

$('#countries').keypress(function(e) { 
    if(e.which == 13) { 
     var value; // here I have to get the value of the input 
     // insert the li to the ul: 


     var html = $(value).find("ul").append('<li value="1">' + value + 
         '&nbsp;&nbsp;<span class="closeButton">X</span></li>'); 
     $("#countries").val(html); 
    } 
});