输入自动提示搜索提示功能的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的淡入淡出的特效基础练习
Dec 13 Javascript
chrome原生方法之数组
Nov 30 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
小程序实现发表评论功能
Jul 06 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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
PHP 定界符 使用技巧
2009/06/14 PHP
php自动加载的两种实现方法
2010/06/21 PHP
php 问卷调查结果统计
2015/10/08 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
js动态创建、删除表格示例代码
2013/08/07 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
基于python调用psutil模块过程解析
2019/12/20 Python
pytorch forward两个参数实例
2020/01/17 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
员工薪酬福利制度
2014/01/17 职场文书
法律六进活动方案
2014/03/13 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
假释思想汇报范文
2014/10/11 职场文书
督导岗位职责范本
2015/04/10 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
甲午风云观后感
2015/06/02 职场文书
七年级生物教学反思
2016/02/20 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL