输入自动提示搜索提示功能的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 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
可兼容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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php的ddos攻击解决方法
2015/01/08 PHP
基于php实现的验证码小程序
2016/12/13 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python字符串常用方法
2018/06/14 Python
浅析python内置模块collections
2019/11/15 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
C面试题
2015/10/08 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
公证书标准格式
2014/04/10 职场文书
2014年绿化工作总结
2014/12/09 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers