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

来源：互联网发布：php s3 编辑：程序博客网时间：2024/05/29 13:44

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

0 0