日期:2014-05-16  浏览次数:20271 次

输入自动提示搜索提示功能(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