How can I add a multiple-item autocompletion functionality for a textbox?

I want to have a textbox, and if I write some thing in it, it will provide me hints. Like I write Lond in a "cities" text field, it will display London and开发者_如何学Python if I click on it, a small box with a small cross having London should be added to the text field. Then I can repeat this to add more items.

It's the same functionality like in Stack Overflow tag edit control: If I write a tag name, it automatically searches and when I click, it is added.

I suppose it's some jQuery component - which one?

Or, you could use this plugin: http://loopj.com/jquery-tokeninput/

Here you have a demo: http://loopj.com/jquery-tokeninput/demo.html

Hope this helps. Cheers

If you are using ASP.Net you can use my opensourse project ASPTokenInput which adds server side functionality to the jquery-tokeninput plugin

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

Here is the best Solution without using any plugin.

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