输入自动揭示搜索提示功能(javascript:sugggestion.js)

输入自动提示搜索提示功能(javascript:sugggestion.js)

/** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞)Date:2013.08.21 */var SugObj = new Object();$(document).ready(function(){//文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示效果保持一致//使用搜索提示功能输入框默认IDSugObj.keywords_input_id = "keywords_input";//搜索输入框高度SugObj.keywords_input_height = $("#"+SugObj.keywords_input_id+"").height();//搜索输入框宽度SugObj.keywords_input_width = $("#"+SugObj.keywords_input_id+"").width();//搜索输入框宽度字体颜色SugObj.keywords_input_color = $("#"+SugObj.keywords_input_id+"").css("color");//搜索输入框宽度字体大小SugObj.keywords_input_font_size = $("#"+SugObj.keywords_input_id+"").css("font-size");//用户输入的值SugObj.keywords_input_value = null;//设置显示搜索提示div的样式//显示提示信息的DIV的IDSugObj.suggestion_div_id = "sug_layer_div";//默认的提示信息DIV样式$("#"+SugObj.suggestion_div_id+"").addClass("sugLayerDiv");//根据输入框设置DIV宽度$("#"+SugObj.suggestion_div_id+"").css("width",SugObj.keywords_input_width);//$("#"+SugObj.suggestion_div_id+"").css("position","relative");//$("#"+SugObj.suggestion_div_id+"").css("overflow","hidden");//DIV 内容溢出时隐藏//$("#"+SugObj.suggestion_div_id+"").css("background","#fff");//DIV 背景颜色//$("#"+SugObj.suggestion_div_id+"").css("border","#c5dadb 1px solid");//DIV 边框样式//$("#"+SugObj.suggestion_div_id+"").css("display","none");//DIV 初始隐藏//提示结果默认显示提示数目SugObj.default_showItem_count = 10;//设定点击"more"所显示数目SugObj.more_showItem_count = 20;//标记上下键时所处位置SugObj.cursor_now_position = -1;});//性能考虑:如果用户每输入一个字母就立即往服务器传的的话，服务器的承载就会过大，//于是考虑可以将每次请求延迟0.5s发送(待考虑)$(document).ready(function(){//输入框的id为keywords_input，这里监听输入框的keyup事件$("#"+SugObj.keywords_input_id+"").keyup(function(event){if((event.keyCode >= 48 && event.keyCode <=57) || (event.keyCode >= 96 && event.keyCode <= 105) || (event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode == 8)) {//获取输入框的值?var kw = $("#"+SugObj.keywords_input_id+"").val();//去掉输入字符串两端的空格kw = kw.replace(/(^\s*)|(\s*$)/g,"");if (kw == "") {//清空DIV内容$("#"+SugObj.suggestion_div_id+"").empty();//隐藏DIV$("#"+SugObj.suggestion_div_id+"").css("display","none");} else {//将用户输入值保存到SugObj对象中SugObj.keywords_input_value = kw;//运行Ajax请求结果runSearchAjax(0);}}else if(event.keyCode == 38) {//Up Arrowif (--SugObj.cursor_now_position == -1) {//判断自减一后是否已移到文本框$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);//去掉提示结果的样式 #fff-白色$("#showDataTable tr.line").css("background","#fff");}else if(SugObj.cursor_now_position == -2) {//已在文本框后按Up-Arrow移到最后一行//搜索提示结果索引从0开始var index = $("#showDataTable tr.line").length - 1;//搜索提交结果为0,则返回if (index < 0) {return;}//取最后一个提示结果$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[index]).text());$($("#showDataTable tr.line")[index]).siblings().css("background","#fff").end().css("background","#c0c0c0");SugObj.cursor_now_position = index;}else {$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text());$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");}}else if(event.keyCode == 40) {//Down Arrowvar trCount = $("#showDataTable tr.line").length;if (++SugObj.cursor_now_position == trCount) {//判断加一操作后cursor_now_position值是否超出列表数目界限//超出的话就将cursor_now_position值变为初始值SugObj.cursor_now_position = -1;//并将文本框中值设为用户用于搜索$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);//去掉提示结果的样式$("#showDataTable tr").css("background","#fff");}else {$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text());//将当前结果显示在输入框中$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");}}//End if});//光标离开输入框时隐藏搜索提示$("#"+SugObj.keywords_input_id+"").blur(function(){var intId = window.setInterval(function(){$("#"+SugObj.suggestion_div_id+"").css("display","none");window.clearInterval(intId);},200);$("#"+SugObj.suggestion_div_id+" tr.line").click(function(){window.clearInterval(intId);$("#"+SugObj.keywords_input_id+"").val($(this).text());$("#"+SugObj.keywords_input_id+"").focus();SugObj.cursor_now_position = -1;runSearchAjax(0);});$("#"+SugObj.suggestion_div_id+" tr.moreline").click(function(){window.clearInterval(intId);$("#"+SugObj.keywords_input_id+"").focus();SugObj.cursor_now_position = -1;runSearchAjax(1);});});});//isMore为1:多于二十条则只显示二十条,少于二十条,则有多少显示多少//isMore为0:多于十条则只显示十条,少于十条,则有多少显示多少function runSearchAjax(isMore) {$.ajax({type:"GET",dataType:"json",url:$("#"+SugObj.keywords_input_id+"").attr("searchURL"),data:{"keywords_input":escape($("#"+SugObj.keywords_input_id+"").val())},success:function(data,status) {if (data.sugList == null || data.sugList == undefined || data.sugList.length == 0) {$("#"+SugObj.suggestion_div_id+"").empty();$("#"+SugObj.suggestion_div_id+"").css("display","none");} else {//var result = $.parseJSON(data.sugList);var result = data.sugList;var dataArray = [];$.each(result,function(i,value){dataArray.push(value);});//获取记录的个数var dataItemLength = dataArray.length;if (dataItemLength <= 0) {return;//搜索提交结果为0,则返回}var layerLabel = [];layerLabel.push(" <table id='showDataTable' width='100%'> ");//创建一个tableif (isMore == 0) {if (dataItemLength <= SugObj.default_showItem_count) {for (var i = 0; i < dataItemLength; ++i) {layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");}}else{for (var i = 0; i < SugObj.default_showItem_count; ++i) {layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr>");}layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");layerLabel.push(" class='moreline'><td style='padding-left:"+(SugObj.keywords_input_width-56)+"px'> ");layerLabel.push(" <span style='cursor:pointer;'>more...</span></td></tr> ");}}else if (isMore == 1) {if (dataItemLength <= SugObj.more_showItem_count) {for (var i = 0; i < dataItemLength; ++i) {layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");}}else{for (var i = 0; i < SugObj.more_showItem_count; ++i) {layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");}}}else{for (var i = 0; i < dataItemLength; ++i) {layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");}}layerLabel.push("</table>");var layer = layerLabel.join("");//显示DIV$("#"+SugObj.suggestion_div_id+"").css("display","block");//先清空#searchResult下的所有子元素$("#"+SugObj.suggestion_div_id+"").empty();//将刚创建的table插入到#searchResult内    $("#"+SugObj.suggestion_div_id+"").append(layer);    $("#showDataTable tr").css("color",SugObj.keywords_input_color);    $("#showDataTable tr").css("font-size",SugObj.keywords_input_font_size);    //监听提示框的鼠标悬停事件    $("tr.line").hover(function(){    $("tr.line").css("background","#fff");    $(this).css("background","#c0c0c0");    },function(){    $(this).css("background","#fff");    });}}});}//输入框的坐标发生变化function ChangeCoords() {//获取距离最左端的距离，像素，整型var left = $("#"+SugObj.keywords_input_id+"").offsetLeft;//获取距离最顶端的距离，像素，整型var top = $("#"+SugObj.keywords_input_id+"").offsetTop+keywords_input_height;//重新定义CSS属性$("#"+SugObj.suggestion_div_id+"").css("left",left+"px");$("#"+SugObj.suggestion_div_id+"").css("top",top+"px");}//监听搜索提示结果的鼠标单击事件function hoverAction(data) {//隐藏搜索提示DIV$("#"+SugObj.suggestion_div_id+"").css("display","none");//将点击数据加入到搜索提示输入框中$("#"+SugObj.suggestion_div_id+"").val(data);//将光标聚焦在搜索提示输入框中$("#"+SugObj.suggestion_div_id+"").focus();//将cursor_now_position值变为初始值cursor_now_position = -1;//运行Ajax方法,向服务器发送请求runSearchAjax(0);}//窗体的大小改变会触发resize()事件，只需在该事件内调用ChangeCoords()方法即可$(window).resize(ChangeCoords);