输入自动提示搜索提示功能的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 相关文章推荐
Javascript 判断是否存在函数的方法
Jan 03 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
原生js中运算符及流程控制示例详解
Jan 05 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
Opacity.js
2007/01/22 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python实现银行管理系统
2019/10/25 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
单位成立周年感言
2014/01/26 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
第一书记观后感
2015/06/08 职场文书
资产移交协议书
2016/03/24 职场文书
导游词之天津古文化街
2019/11/09 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
MySQL池化框架学习接池自定义
2022/07/23 MySQL