第一步:封装好的js代码
(function(){
var setting;
$.fn.keywordinput=function(opts){
setting=$.extend({
number:3,
msg:"请输入标签,通过分号确认"
},opts||{});
init(this);
$(this).keyup(inputKeyWord);
//事件委派新增的节点也能调用createKeyword方法
$("#keywords-wrap").on("click","a.keyword-shut",function(event){
$(this).parent().parent(".keyword-in").remove();
event.preventDefault();
});
}
//初始化方法
function init(obj){
var that=obj;
$(that).val(setting.msg);//初始化消息
$(that).addClass("keyword-input");//初始化css样式
$(that).wrap("<div id='keyword-container'></div>").before("<div id='keywords-wrap'></div>");
$(that).focus(function(){
$(this).val("");
});
$(that).blur(function(){
$(this).val(setting.msg);
});
}
//键盘输入事件
function inputKeyWord(event){
var code=event.keyCode;
if(code==186){
var c=$(this).val();
if($(".keyword-in").length>=3){
layer.msg('最多只能输入3个标签!',{icon:2,time:1000});
event.preventDefault();
return;
}
var ks=$("input[name='ks']");
for(var i=0;i<ks.length;i++){
if(ks[i].value==c){
layer.msg('不能添加重复的标签!',{icon:2,time:1000});
event.preventDefault();
return;
}
}
if(c!=""){
var el=createKeyword(c);
$("#keywords-wrap").append(el);
$(this).val("");
}
}
}
//创建新增标签
function createKeyword(val){
return "<div class='keyword-in'><span>"+val+"<a href='#' class='keyword-shut'>x</a></span><input type='hidden' name='ks' value='"+val+"'> </div>";
}
})(jQuery)
第二步:css样式文件
#keyword-container{
border:1px solid #bbb;
width: 300px;
padding: 5px;
}
.keyword-input{
border:none;
width:298px;
color:#aaa;
height:30px;
}
div.keyword-in{
float: left;
font-size: 12px;
margin:3px;
background: #3fa7cb;
padding: 3px;
color:#ffff;
}
a.keyword-shut:LINK,a.keyword-shut:VISITED {
color:#fff;
text-decoration: none;
margin-left: 3px;
}
a.keyword-shut:HOVER {
color: #732;
}
第三步:jsp页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8081/static/plugins/jquery-ui/jquery-keyword.css" />
<script type="text/javascript" src="http://localhost:8081/static/plugins/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:8081/static/plugins/jquery-ui/jquery-keyword.js"></script>
<script type="text/javascript">
$(function(){
$("#keyword-input").keywordinput();
});
</script>
</head>
<body>
<input type="text" id="keyword-input" value="请输入标签,通过分号或者回车确认">
</body>
</html>
效果图:
第四步:加入jquery-ui自动补全插件官网地址http://jqueryui.com/demos/下载相应的版本,我这里下载版本的是jquery-ui-1.10.4
jsp需要引入jquery.min.js、 jquery-ui-1.10.4.custom.min.css、jquery-ui-1.10.4.custom.min.js 注意顺序,先引入jquery的js,可参考官网的Demo
效果图:
jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${admin_domain}/static/plugins/jquery-ui/jquery-keyword.css" />
<link rel="stylesheet" type="text/css" href="${admin_domain}/static/plugins/jquery-ui/jquery-ui-1.10.4.custom.min.css" />
<script type="text/javascript" src="${admin_domain}/static/plugins/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${admin_domain}/static/plugins/jquery-ui/jquery-keyword.js"></script>
<script type="text/javascript" src="${admin_domain}/static/plugins/jquery-ui/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$( function() {
$("#keyword-input").keywordinput();
$( "#keyword-input" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: '${admin_domain}/ajax/tagsByName',
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
}
});
});
});
</script>
</head>
<body>
<input type="text" id="keyword-input" value="请输入标签,通过分号或者回车确认">
</body>
</html>