我想要一个文本框,如果我在其中写入一些东西,它会给我提示。 就像我在“城市”文本字段中输入Lond
一样,它会显示London
,如果我点击它,应该在文本字段中添加一个带有小号十字的小盒子London
。然后我可以重复这个来添加更多的项目。如何为文本框添加多项自动完成功能?
它与Stack Overflow标签编辑控件具有相同的功能:如果我编写标签名称,它会自动搜索,当我点击时,它会被添加。
我想这是一些jQuery组件 - 哪一个?
我想要一个文本框,如果我在其中写入一些东西,它会给我提示。 就像我在“城市”文本字段中输入Lond
一样,它会显示London
,如果我点击它,应该在文本字段中添加一个带有小号十字的小盒子London
。然后我可以重复这个来添加更多的项目。如何为文本框添加多项自动完成功能?
它与Stack Overflow标签编辑控件具有相同的功能:如果我编写标签名称,它会自动搜索,当我点击时,它会被添加。
我想这是一些jQuery组件 - 哪一个?
或者,你可以使用这个插件: http://loopj.com/jquery-tokeninput/
这里有一个演示: http://loopj.com/jquery-tokeninput/demo.html
希望这有助于。干杯
如果您正在使用ASP.Net,你可以用我的opensourse项目ASPTokenInput这增加了服务器端功能的jQuery的tokeninput插件
这里是不使用任何插件的最佳解决方案。
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;
}