复制代码 代码如下:
/**
* 功能:该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 = 96 && event.keycode (event.keycode >= 65 && event.keycode //获取输入框的值ֵ
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 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 return; //搜索提交结果为0,则返回
}
var layerlabel = [];
layerlabel.push( );//创建一个table
if (ismore == 0) {
if (dataitemlength for (var i = 0; i layerlabel.push( layerlabel.push( class='line' >+dataarray[i]+
);
}
}else{
for (var i = 0; i layerlabel.push( layerlabel.push( class='line' >+dataarray[i]+
);
}
layerlabel.push( layerlabel.push( class='moreline'> );
layerlabel.push( more...
);
}
}else if (ismore == 1) {
if (dataitemlength for (var i = 0; i layerlabel.push( layerlabel.push( class='line' >+dataarray[i]+
);
}
}else{
for (var i = 0; i layerlabel.push( layerlabel.push( class='line' >+dataarray[i]+
);
}
}
}else{
for (var i = 0; i layerlabel.push( layerlabel.push( class='line' >+dataarray[i]+
);
}
}
layerlabel.push(
);
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);