输入自动提示搜索提示功能的javascript:sugggestion.js
字体：[ ] 类型：转载 时间：
该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验
代码如下: /** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞) Date: */ var SugObj = new Object(); $(document).ready(function(){ //文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示效果保持一致 //使用搜索提示功能输入框默认ID SugObj.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 = //设置显示搜索提示div的样式 //显示提示信息的DIV的ID SugObj.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 = //运行Ajax请求结果 runSearchAjax(0); } }else if(event.keyCode == 38) { //Up Arrow if (--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) {
} //取最后一个提示结果 $("#"+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 = }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 Arrow var trCount = $("#showDataTable tr.line"). 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.sugL var dataArray = []; $.each(result,function(i,value){ dataArray.push(value); }); //获取记录的个数 var dataItemLength = dataArray. if (dataItemLength &= 0) {
//搜索提交结果为0,则返回 } var layerLabel = []; layerLabel.push(" &table id='showDataTable' width='100%'& ");//创建一个table if (isMore == 0) { if (dataItemLength &= SugObj.default_showItem_count) { for (var i = 0; i & dataItemL ++i) { layerLabel.push(" &tr style='cursor: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_ ++i) { layerLabel.push(" &tr style='cursor: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: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:'&more...&/span&&/td&&/tr& "); } }else if (isMore == 1) { if (dataItemLength &= SugObj.more_showItem_count) { for (var i = 0; i & dataItemL ++i) { layerLabel.push(" &tr style='cursor: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_ ++i) { layerLabel.push(" &tr style='cursor: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 & dataItemL ++i) { layerLabel.push(" &tr style='cursor: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+"").offsetL //获取距离最顶端的距离，像素，整型 var top = $("#"+SugObj.keywords_input_id+"").offsetTop+keywords_input_ //重新定义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);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具