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

复制代码代码如下:
/**
* 功能:该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）;