基于jQuery的类似Google搜索的提示列表

/** * @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($){ var has_val_flag = false; //是否已选值 var mouse_click_flag = false; $.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(){ if ($tipsList.is(':visible') && !has_val_flag && !mouse_click_flag){ $currentSelect = getCurrentSelect(); var first_child = $tipsList.children('ul').children('li:first-child'); var pattern = $(first_child).text(); var value = $.trim($input.val()); if(value!=""){ $(first_child).addClass(options.selectClass); selectCurrent(); } } if(options.hiddenId!=undefined && options.hiddenId!=null && options.hiddenId!=""){ if( $input.val()=="" ){ if(options.otherhidden!=""){ var otherhidden = $input.prev("[name='"+options.otherhidden+"']"); $(otherhidden).val(""); } else{ $("#"+options.hiddenId).val(""); } } else{ //if(!has_val_flag){ // $("#"+options.hiddenId).val(""); // $input.val(""); // has_val_flag = false; //} } } if(options.otherfunction!=""){ reflect_function(options.otherfunction); //反射调用js function ,可重写该js } //jQuery("#tips-list-div-" + $input.attr("id")).hide(); //setTimeout("jQuery('#tips-list-div-" + $input.attr("id")+"').slideUp('slow')", 100); }); $input.keydown(processKey); $input.keyup(getData); function processKey(e) { has_val_flag = false; 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")!=""){ if(options.otherhidden!=""){ var otherhidden = $input.prev("[name='"+options.otherhidden+"']"); $(otherhidden).val($currentSelect.attr("hiddenText")); }else{ $("#"+$currentSelect.attr("hidenId")).val($currentSelect.attr("hiddenText")); } } if($currentSelect.attr("show_1_id")!=undefined && $currentSelect.attr("show_1_id")!=null && $currentSelect.attr("show_1_id")!=""){ $("#"+$currentSelect.attr("show_1_id")).val($currentSelect.attr("show_1_text")); } if($currentSelect.attr("show_2_id")!=undefined && $currentSelect.attr("show_2_id")!=null && $currentSelect.attr("show_2_id")!=""){ $("#"+$currentSelect.attr("show_2_id")).val($currentSelect.attr("show_2_text")); } if($currentSelect.attr("show_3_id")!=undefined && $currentSelect.attr("show_3_id")!=null && $currentSelect.attr("show_3_id")!=""){ $("#"+$currentSelect.attr("show_3_id")).val($currentSelect.attr("show_3_text")); } if($currentSelect.attr("show_4_id")!=undefined && $currentSelect.attr("show_4_id")!=null && $currentSelect.attr("show_4_id")!=""){ $("#"+$currentSelect.attr("show_4_id")).val($currentSelect.attr("show_4_text")); } has_val_flag = true; hiddenTips(); $input.blur(); $input.focus(); event.keyCode = 9; } } // 向下选择 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(options.ds!=""){ alert("from local"); return; } if(options.show!=""){ if(options.otherval!=""){ var param = options.param; $.ajax({ type: "POST", url: options.url, data: options.param+"="+$("#"+options.otherval).val(), contentType: "application/x-www-form-urlencoded; charset=utf-8", dataType: "json", success: function(data){ displayDiv(data); } }); } else{ var param = options.param; $.ajax({ type: "POST", url: options.url, data: options.param+"="+$input.val(), contentType: "application/x-www-form-urlencoded; charset=utf-8", dataType: "json", success: function(data){ displayDiv(data); } }); } } else{ if($input.val()!=""){ var param = options.param; $.ajax({ type: "POST", url: options.url, data: options.param+"="+$input.val(), contentType: "application/x-www-form-urlencoded; charset=utf-8", dataType: "json", success: function(data){ displayDiv(data); } }); }else{ hiddenTips(); } } } // 初始化提示列表 每次AJAX获取数据后调用 function initTips(){ $tipsList.find("ul").find("li").each(function(){ $(this).mouseover(function(){ mouse_click_flag = true; $(this).addClass(options.selectClass);