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


Posted in Javascript onSeptember 02, 2013
/** 
* 功能:该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 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").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%'> ");//创建一个table 
if (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);
Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
JavaScript基本编码模式小结
May 23 Javascript
JsRender实用入门教程
Oct 31 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
微信小程序音乐播放器开发
Nov 20 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 #Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 #Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 #Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 #Javascript
js的alert弹出框出现乱码解决方案
Sep 02 #Javascript
javascript中的window.location.search方法简介
Sep 02 #Javascript
js Math 对象的方法
Sep 01 #Javascript
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
JavaScript面象对象设计
2008/04/28 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
Python中datetime模块参考手册
2017/01/13 Python
python实现各进制转换的总结大全
2017/06/18 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
thinkphp5 路由分发原理
2021/03/18 PHP
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
财务管理专业推荐信
2013/11/19 职场文书
初中校园广播稿
2014/02/02 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
无毒社区工作方案
2014/05/23 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
Nginx的gzip相关介绍
2022/05/11 Servers