google 下拉框

/** * @author: 一只拖鞋 (Email: [email protected]) * * 基于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 = "

"; if(json.length<=0){ div += "
• 无数据！
"; } for(var i=0;i"; var lText = eval("json[i]."+options.leftText); if(lText!=undefined && lText!=null && lText.length>options.leftTextLength){ lText = lText.substring(0, options.leftTextLength) + "..."; } div += "" + (lText==null?"":lText) + ""; var rText = eval("json[i]."+options.rightText); if(rText!=undefined && rText!=null && rText.length>options.rightTextLength){ rText = rText.substring(0, options.rightTextLength) + "..."; } div += ""+(rText==null?"":rText)+""; div += ""; } div += "

"; 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("

1

"); } if($("#tips-list-hidden-div-" + this.attr("id")).attr("class")==undefined){ $(document.body).append("

1

"); } this.each(function(){ new $.tips(this, options); }); return this; } })(jQuery) /* # 调用示例： # # # $("#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"} ] 

 

 

 

本jQuery扩展由一只拖鞋(Email: [email protected])制作。
运行本例必须包含以下文件：
tips.js 扩展js文件
tips.css 扩展样式
/**

* @author: 一只拖鞋 (Email: [email protected])
*
* 基于jQuery的类似Google搜索的提示列表
* 调用方式：$(input).tips(options);
* options: 参数选项
* url JOSN 获取URL地址
* param 获取JOSN数据时提交的参数名
* leftText 提示列表左边显示文字的JSON字段
* rightText 提示列表右边显示文字的JSON字段
* inputText 点击提示列表后显示在输入框内容的JSON字段
*
* hiddenId 隐藏域id 可选
* hiddenText 隐藏域值 可选
* width 提示列表宽度，可选(超宽时自动加宽, 默认为300)
* selectClass 选中样式
*
* 要求返回的JSON数据格式为：
* [{key:value,key:value...},{key:value,key:value...},...]
*
* 支持：IE, Firefox
*/

类GOOGLE搜索框1： 类GOOGLE搜索框2：
类GOOGLE搜索框3： 类GOOGLE搜索框4：

 

 

 

/** * action 返回JSON数据格式 **/ {"results":[{"name":"000000000270","id":"0"}]}