复制代码 代码如下:

/**

* 功能:该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+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");

layerLabel.push(" ><td>"+dataArray[i]+"</td></tr> ");

}

}else{

for (var i = 0; i < SugObj.default_showItem_count; ++i) {

layerLabel.push(" <tr+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");

layerLabel.push(" ><td>"+dataArray[i]+"</td></tr>");

}

layerLabel.push(" <tr+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");

layerLabel.push("><td+(SugObj.keywords_input_width-56)+"px'> ");

layerLabel.push(" <span>more...</span></td></tr> ");

}

}else if (isMore == 1) {

if (dataItemLength <= SugObj.more_showItem_count) {

for (var i = 0; i < dataItemLength; ++i) {

layerLabel.push(" <tr+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");

layerLabel.push(" ><td>"+dataArray[i]+"</td></tr> ");

}

}else{

for (var i = 0; i < SugObj.more_showItem_count; ++i) {

layerLabel.push(" <tr+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");

layerLabel.push(" ><td>"+dataArray[i]+"</td></tr> ");

}

}

}else{

for (var i = 0; i < dataItemLength; ++i) {

layerLabel.push(" <tr+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");

layerLabel.push(" ><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);