输入自动提示搜索提示功能的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 相关文章推荐
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
php表单提交实例讲解
2015/11/12 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python实现广度优先搜索过程解析
2019/10/19 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
安全事故检讨书
2014/01/18 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
PHP实现两种排课方式
2021/06/26 PHP