javaScript输入框关键字添加，并且加入了jquery自动补全功能

最新推荐文章于 2022-11-29 17:40:17 发布

Mario♔

最新推荐文章于 2022-11-29 17:40:17 发布

阅读量679

点赞数

文章标签： jquery自动补全功能关键字添加

本文链接：https://blog.csdn.net/semial/article/details/70614039

版权

第一步：封装好的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>