テキストボックスに複数項目のオートコンプリート機能を追加するにはどうすればよいですか？

Question

私はテキストボックスを持ちたいと思っています。もし私がそれに何か書いたら、それは私にヒントを提供します。 「都市」テキストフィールドにLondと書いてありますが、それはLondonと表示されます。それをクリックすると、十字形の小さいボックスにはLondonが追加されます。その後、これを繰り返してアイテムを追加できます。

スタックオーバーフロータグ編集コントロールと同じ機能です。タグ名を書き込むと自動的に検索され、クリックするとタグ名が追加されます。

私はそれがいくつかのjQueryコンポーネントだと思います - どちらですか？

Answer 1

それとも、あなたがこのプラグインを使用することができます。 ここhttp://loopj.com/jquery-tokeninput/

あなたはデモを持っている： http://loopj.com/jquery-tokeninput/demo.html

は、この情報がお役に立てば幸いです。あなたはASP.Netを使用している場合乾杯

Answer 2

あなたはここでjqueryの-tokeninputプラグインにサーバー側の機能を追加し、私のopensourseプロジェクトASPTokenInput

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