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，可以使用我的openourse项目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;
}

如何为文本框添加多项自动填充功能？

3 个答案: