如何爲文本框添加多項自動完成功能？

Question

我想要一個文本框，如果我在其中寫入一些東西，它會給我提示。 就像我在「城市」文本字段中輸入Lond一樣，它會顯示London，如果我點擊它，應該在文本字段中添加一個帶有小號十字的小盒子London。然後我可以重複這個來添加更多的項目。

它與Stack Overflow標籤編輯控件具有相同的功能：如果我編寫標籤名稱，它會自動搜索，當我點擊時，它會被添加。

我想這是一些jQuery組件 - 哪一個？

Answer 1

或者，你可以使用這個插件： http://loopj.com/jquery-tokeninput/

這裏有一個演示： http://loopj.com/jquery-tokeninput/demo.html

希望這有助於。乾杯

Answer 2

如果您正在使用ASP.Net，你可以用我的opensourse項目ASPTokenInput這增加了服務器端功能的jQuery的tokeninput插件

https://github.com/harindaka/ASPTokenInput/wiki

Answer 3

這裏是不使用任何插件的最佳解決方案。

http://jsfiddle.net/tMM63/4/

jQuery的

$(function(){ 
$('#tags input').on('focusout',function(){  
    var txt= this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g,''); // allowed characters 
    if(txt) { 
    $(this).before('<span class="tag">'+ txt.toLowerCase() +'</span>'); 
    } 
    this.value=""; 
}).on('keyup',function(e){ 
// if: comma,enter (delimit more keyCodes with | pipe) 
if(/(188|13)/.test(e.which)) 
    $(this).focusout(); 
}); 

$('#tags').on('click','.tag',function(){ 
    if(confirm("Really delete this tag?")) $(this).remove(); 
}); 

}); 

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<div id="tags"> 
<span class="tag">Wordpress</span> 
<span class="tag">C</span> 
<span class="tag">Java Script</span> 
<input type="text" placeholder="Enter Multiple tags Seperated By Comma or Enter" /> 
</div> 

CSS

#tags{ 
    float:left; 
    border:1px solid #ccc; 
    padding:5px; 
    width: 600px; 
    font-family:Arial; 
} 
#tags span.tag { 
cursor: pointer; 
display: block; 
float: left; 
color: #555; 
border: 1px solid #ccc; 
padding: 5px; 
padding-right: 25px; 
margin: 4px; 
border-radius: 3px; 
font-size: 12px; 
} 
#tags span.tag:hover{ 
opacity:0.7; 
} 
#tags span.tag:after{ 
position:absolute; 
content:"x"; 
border:1px solid; 
padding:0 4px; 
margin:3px 0 10px 5px; 
font-size:10px; 
} 
#tags input{ 
background:#efefef; 
border:0; 
margin:4px; 
padding:7px; 
width:330px; 
}