/** * @author: 一只拖鞋 (Email: joknm12@163.com) * * 基于jQuery的类似Google搜索的提示列表 * 调用方式:$(input).tips(options); * options: 参数选项 * url JOSN 获取URL地址 * param 获取JOSN数据时提交的参数名 * leftText 提示列表左边显示文字的JSON字段 * rightText 提示列表右边显示文字的JSON字段 * inputText 点击提示列表后显示在输入框内容的JSON字段 * rightTextLength: 50, // 右边数字最长的长度 * leftTextLength:50, // 左边数字最长的长度 * * hiddenId 隐藏域id 可选 * hiddenText 隐藏域值 可选 * width 提示列表宽度,可选(超宽时自动加宽, 默认为300) * selectClass 选中样式 * * 要求返回的JSON数据格式为: * [{key:value,key:value...},{key:value,key:value...},...] * * 支持:IE, Firefox * @version: 1.0 * 初始版本 * * @version: 2.0 * 修复问题:1、禁止浏览器自动完成功能 * 2、修复与其它JS兼容问题 * 3、鼠标经过时显示手状图 * @version: 2.1 * 修复问题:按回车无效,已修改 * 添加功能:左边及右边字数显示的限制,默认为20个字/字符 */ (function($){ $.tips = function(input, options){ var $input = $(input); var $tipsList = $("#tips-list-div-" + $input.attr("id")); var $hiddenTips = $("#tips-list-hidden-div-" + $input.attr("id")); $input.attr({"autocomplete":"off"}); // 禁止浏览器自动完成功能 $input.focus(function(e){ getData(e); }); $input.blur(function(){ setTimeout("jQuery('#tips-list-div-" + $input.attr("id")+"').slideUp('slow')", 100); }); $input.keydown(processKey); $input.keyup(getData); function processKey(e) { if (testSpeKey(e) && ($tipsList.is(':visible') || getCurrentSelect())) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); e.cancelBubble = true; e.returnValue = false; switch(e.keyCode) { case 38: // up prevSelect(); break; case 40: // down nextSelect(); break; case 13: // 回车 selectCurrent(); break; } } } // 当前选中的li function getCurrentSelect() { if (!$tipsList.is(':visible')) return false; var $currentSelect = $tipsList.children('ul').children('li.'+options.selectClass); if (!$currentSelect.length) $currentSelect = false; return $currentSelect; } // 将当前选中li返回到 input 中 function selectCurrent() { $currentSelect = getCurrentSelect(); if ($currentSelect) { $input.val($currentSelect.attr("inputText")); if($currentSelect.attr("hidenId")!=undefined && $currentSelect.attr("hidenId")!=null && $currentSelect.attr("hidenId")!=""){ $("#"+$currentSelect.attr("hidenId")).val($currentSelect.attr("hiddenText")); } hiddenTips(); $input.blur(); } } // 向下选择 function nextSelect() { $currentSelect = getCurrentSelect(); if ($currentSelect) $currentSelect.removeClass(options.selectClass).next().addClass(options.selectClass); else $tipsList.children('ul').children('li:first-child').addClass(options.selectClass); } // 向上选择 function prevSelect() { $currentResult = getCurrentSelect(); if ($currentResult) $currentResult.removeClass(options.selectClass).prev().addClass(options.selectClass); else{ $tipsList.children('ul').children('li:last-child').addClass(options.selectClass); } } // 测试是否 特殊键 function testSpeKey(e){ // handling up/down/escape requires results to be visible // handling enter/tab requires that AND a result to be selected if (/27$|38$|40$/.test(e.keyCode) || /^13$|^9$/.test(e.keyCode)) { return true; } } // 通过AJAX获取json数据 function getData(e){ if(testSpeKey(e)){ return; } if($input.val()!=""){ var param = options.param; $.ajax({ type: "POST", url: options.url, data: options.param+"="+$input.val(), success: function(data){ displayDiv(eval(data)); } }); }else{ hiddenTips(); } } // 初始化提示列表 每次AJAX获取数据后调用 function initTips(){ $tipsList.find("ul").find("li").each(function(){ $(this).mouseover(function(){ $(this).addClass(options.selectClass); }); $(this).mouseout(function(){ $(this).removeClass(options.selectClass); }); $(this).click(selectCurrent) }); } // 清除样式 function cleanClass(){ $tipsList.find("ul").find("li").each(function(){ $(this).removeClass(options.selectClass); }); } // 显示提示列表 function showTips(html){ $tipsList.html(html); $hiddenTips.html(html); var offset = $input.offset(); var height = $input.outerHeight(); $tipsList.css("top", offset.top + height); $tipsList.css("left", offset.left); var width = options.width initTips(); $hiddenTips.css("display", "block"); $hiddenTips.find("li").each(function(){ var span = $(this).find("span"); var width1 = $(span[0]).width() + $(span[1]).width() + 20; var width2 = $(this).width() + 20; var maxWidth = width1>width2?width1:width2; width = width>maxWidth?width:maxWidth; }); $hiddenTips.css("display", "none"); $tipsList.width(width); $tipsList.slideDown("slow"); } // 隐藏提示列表 function hiddenTips(){ $tipsList.slideUp("slow"); } // 将JOSN数据生成DIV function displayDiv(json){ var div = "<ul>"; if(json.length<=0){ div += "<li hidenId='' hiddenText='' inputText=''><span class='left'>无数据!</span><span class='right'></span></li>"; } for(var i=0;i<json.length;i++){ div += "<li "; if(options.hiddenId!=null){ div += " hidenId='"+options.hiddenId+"' hiddenText='"+eval("json[i]."+options.hiddenText)+"' "; } div += "inputText='"+eval("json[i]."+options.inputText)+"'>"; var lText = eval("json[i]."+options.leftText); if(lText!=undefined && lText!=null && lText.length>options.leftTextLength){ lText = lText.substring(0, options.leftTextLength) + "..."; } div += "<span class='left'>" + (lText==null?"":lText) + "</span>"; var rText = eval("json[i]."+options.rightText); if(rText!=undefined && rText!=null && rText.length>options.rightTextLength){ rText = rText.substring(0, options.rightTextLength) + "..."; } div += "<span class='right'>"+(rText==null?"":rText)+"</span>"; div += "</span></li>"; } div += "</ul>"; showTips(div); } } $.fn.tips = function(options){ options = options || {}; options.url = options.url || ""; // 获取JSON数据的url地址 options.param = options.param || this.id; // 获取JOSN数据时提交的参数名 options.width = options.width || 300; options.rightTextLength = options.rightTextLength || 20; options.leftTextLength = options.leftTextLength || 20; options.leftText = options.leftText || "leftText"; // 提示列表左边显示文字的JSON字段 options.rightText = options.rightText || "rightText"; // 提示列表右边显示文字的JSON字段 options.inputText = options.inputText || "inputText"; // 点击提示列表后显示在输入框内容的JSON字段 options.hiddenId = options.hiddenId || null; // 如有需要在隐藏域添加隐藏表单信息时,请填写隐藏域的 id options.hiddenText = options.hiddenText || "hiddenText"; // 如有需要在隐藏域添加隐藏表单信息时,隐藏域内容对应的JOSN字段 options.selectClass = options.selectClass || "tips-div-hover"; // 选中样式 if($("#tips-list-div-" + this.attr("id")).attr("class")==undefined){ $(document.body).append("<div id='tips-list-div-"+this.attr("id")+"' class='tips-div'>1</div>"); } if($("#tips-list-hidden-div-" + this.attr("id")).attr("class")==undefined){ $(document.body).append("<div id='tips-list-hidden-div-"+this.attr("id")+"' style='width:20px;visibility:hidden;display:none;'>1</div>"); } this.each(function(){ new $.tips(this, options); }); return this; } })(jQuery) /* # 调用示例: # <input type="text" height="20px" id="myinput1" name="myinput1" value=""/> # # $("#myinput1").tips({ # url: "json.html", // JOSN 获取URL地址 # param: "myinput1", // 获取JOSN数据时提交的参数名 # leftText: "text",// 提示列表左边显示文字的JSON字段 # rightText: "text2", // 提示列表右边显示文字的JSON字段 # inputText: "text", // 点击提示列表后显示在输入框内容的JSON字段 # rightTextLength: 20, // 右边数字最长的长度 # leftTextLength:20, // 左边数字最长的长度 # # hiddenId: "hid", // 隐藏域id 可选 # hiddenText: "id", // 隐藏域值 可选 # width: 100 // 提示列表宽度,可选 # }); */ .tips-div {background:#fff;border:1px solid #7f9db9;position: absolute;display: none;margin:0px;padding:1px;} .tips-div ul{margin:0px;padding:0px;list-style:none;cursor:pointer;} .tips-div li{margin:0px;line-height:25px; height:25px; color:#05a; padding:1px 3px;} .tips-div li span.left{margin:0px;padding:0px;float:left;display:block;} .tips-div li span.right{margin:0px;padding:0px;float:right;color:green;display:block;text-align:left;} .tips-div-hover{background:#c8e3fc;} [ {id:1,text:"11111111111111111111111111111111",text2:"ttttttt1"}, {id:2,text:"2222222222222222222222222222222222",text2:"ttttttt2"}, {id:3,text:"33333333333333333",text2:"ttttttt3"}, {id:4,text:"444444444444444444444444",text2:"t4"}, {id:5,text:"55555555555555555555555555",text2:"t5"}, {id:6,text:"6666666666666666666666666666",text2:"t6"}, {id:7,text:"7777777777777777777777777777777777777",text2:"ttttttttttttt7"}, {id:8,text:"88888888888888888888888888",text2:"t8tttttt"}, {id:9,text:"9999999999999999",text2:"t9"}, {id:0,text:"000000000000000000",text2:"t0tttttttttttt"} ] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <mce:script src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="tips.js" mce_src="tips.js" type="text/javascript"></mce:script> <link rel="stylesheet" type="text/css" href="tips.css" mce_href="tips.css"> </HEAD> <BODY> <div style="margin-left:50px;" mce_style="margin-left:50px;"> 本jQuery扩展由一只拖鞋(Email: joknm12@163.com)制作。<br/> 运行本例必须包含以下文件:<br/> tips.js 扩展js文件<br/> tips.css 扩展样式<br/> /**<br/> <div style="margin-left:10px;" mce_style="margin-left:10px;">* @author: 一只拖鞋 (Email: joknm12@163.com)<br/> * <br/> * 基于jQuery的类似Google搜索的提示列表<br/> * 调用方式:$(input).tips(options);<br/> * options: 参数选项<br/> * url JOSN 获取URL地址<br/> * param 获取JOSN数据时提交的参数名<br/> * leftText 提示列表左边显示文字的JSON字段<br/> * rightText 提示列表右边显示文字的JSON字段<br/> * inputText 点击提示列表后显示在输入框内容的JSON字段<br/> * <br/> * hiddenId 隐藏域id 可选<br/> * hiddenText 隐藏域值 可选<br/> * width 提示列表宽度,可选(超宽时自动加宽, 默认为300)<br/> * selectClass 选中样式<br/> *<br/> * 要求返回的JSON数据格式为:<br/> * [{key:value,key:value...},{key:value,key:value...},...]<br/> *<br/> * 支持:IE, Firefox<br/> */<br/></div> </div> <br/> <form> 类GOOGLE搜索框1:<input type="text" height="20px" id="myinput1" name="myinput1" value=""/> 类GOOGLE搜索框2:<input type="text" height="20px" id="myinput2" name="myinput2" value=""/> <br/> 类GOOGLE搜索框3:<input type="text" height="20px" id="myinput3" name="myinput3" value=""/> 类GOOGLE搜索框4:<input type="text" height="20px" id="myinput4" name="myinput4" value=""/> <input type="hidden" id="hid" name="hid" value=""/> </form> <mce:script type="text/javascript"><!-- $(function(){ // 例1: $("#myinput1").tips({ url: "json.html", // JOSN 获取URL地址 param: "myinput1", // 获取JOSN数据时提交的参数名 leftText: "text",// 提示列表左边显示文字的JSON字段 rightText: "text2", // 提示列表右边显示文字的JSON字段 inputText: "text", // 点击提示列表后显示在输入框内容的JSON字段 hiddenId: "hid", // 隐藏域id 可选 hiddenText: "id", // 隐藏域值 可选 width: 100 // 提示列表宽度,可选 }); // 例2: $("#myinput2").tips({ url: "json.html", // JOSN 获取URL地址 param: "myinput2", // 获取JOSN数据时提交的参数名 leftText: "text",// 提示列表左边显示文字的JSON字段 rightText: "text2", // 提示列表右边显示文字的JSON字段 inputText: "text" // 点击提示列表后显示在输入框内容的JSON字段 }); // 例3: $("#myinput3").tips({ url: "json.html", // JOSN 获取URL地址 param: "myinput1", // 获取JOSN数据时提交的参数名 leftText: "text",// 提示列表左边显示文字的JSON字段 rightText: "text2", // 提示列表右边显示文字的JSON字段 inputText: "text", // 点击提示列表后显示在输入框内容的JSON字段 hiddenId: "hid", // 隐藏域id 可选 hiddenText: "id", // 隐藏域值 可选 width: 100 // 提示列表宽度,可选 }); // 例4: $("#myinput4").tips({ url: "json.html", // JOSN 获取URL地址 param: "myinput2", // 获取JOSN数据时提交的参数名 leftText: "text",// 提示列表左边显示文字的JSON字段 rightText: "text2", // 提示列表右边显示文字的JSON字段 inputText: "text", // 点击提示列表后显示在输入框内容的JSON字段 width: 700 }); }); // --></mce:script> </BODY> </HTML> /** * action 返回JSON数据格式 **/ {"results":[{"name":"000000000270","id":"0"}]}