日期:2014-05-16 浏览次数:20271 次
/** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞) Date:2013.08.21 */ 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 = null; //设置显示搜索提示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 = kw; //运行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) { 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