键盘精怪for JQuery _Web前端

键盘精灵for JQuery
    按键精灵，即自动完成，当输入一个字段时，使用户能快速从预填充列表里找到选项。
    公司的项目，如研报审核后台，有好几处都有用到同样功能的按键精灵，只是一些参数上有少许不同。为了减少重复劳动重复代码，需要一个键盘精灵的通用模块。
    键盘精灵的接口说明主要有3项： 1、请求地址。2、参数说明。3、返回JSON数据。
    因此希望能使用一个函数调用，激活自动提示。而由使用者自己配置请求地址，传出参数设定，返回值里需要处理的字段名（list）。不过功能上比较单一，没考虑设置缓存，大小写敏感等,是简化的autocomplete。
    首先是效果图：

功能：
一、用户可设置选项：
   1、弹出下拉框的宽度
   2、激活功能所需的最小输入字符长度
   3、下拉框中所显示的返回值
   4、点选列表后input中填充的值
   5、传出参数param设置
   6、接口地址
   7、处理返回值的指定子集
二、支持鼠标点选，预选项以变色标示
三、支持键盘上下移动预选项，回车与tab选择，ESC取消下拉框
四、失去焦点后下拉框取消
五、由用户指定其他节点，用value来接受选择项的id属性

使用方法：
一、加载运行模块所必须的几个文件：

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="keyboard_autocomplete-1.0.js"></script>
<script type="text/javascript" src="jquery.jsonp-1.0.4.min.js"></script>
<link rel="Stylesheet" href="keyboard_autocomplete.css" />

二、为需要启用该功能的input标示一个喜欢的ID

<input type="text" id="keyword"/>

三、为这个节点调用函数autokeyboard()

$(function() {
    $("#keyword").autokeyboard(HttpParam, configuration);
})

四、为函数配置传入参数

$(function() {
	var HttpParam = {
		url : "http://info.gemantic.com:9085/prompt/list.do",
		param : function(val) {
			var data = {
		        'queryType' :  'theme',
		        'searchFrom':  'stock',
		        'count'     :  10,
		        'query'     :  val,
	        }
	        return data;
		}
	}
	var configuration = {
		
		/**
		 * 解析请求成功后返回的responseData，解析返回结果中的数据。
		 * 如果为空，则默认为ResponseData数据。
		 * 可选项
		 * @param {Object} responseData Ajax请求服务器端的返回值 
		 * @return  需要后续方法中处理的内容，通常是一组数据列表
		 * 
		 * 
		 */
		dealData : function(responseData) {			
			 return responseData.list;
		},	
		
		/**
		 * 下拉列表中用户看到的内容
		 * 
		 * @param {Object} dealData 
		 * @return  
		 */	
		listItemDisplay: function(dealData) {
            return dealData.id + "   " + dealData.label;
        },
			
	    /**
	     * 选中后Input框中显示的内容
	     * 可选项
	     * @param {Object} list
	     */	
		inputDisplay: function(dealData) {
			return dealData.label;
		},		
		
		//指定另一个节点，为它的value赋值原节点不能放下的内容
        anotherValueBox : "#idBox",
	
        /**
         * 
         * 为anotherValueBox指定数据,可用于向服务器发送的内容。如使用键盘精灵选中“万科公司”，将anotherValue设置为万科的代码“000002”，再执行其它发送请求时不发送名称，而是发送代码。
         * 可选项。
         * @param {Object} list
         */
        anotherValue : function(list) {
            return list.id;
        },
		
		//宽度,可选
		width: 152,
		//击键后激活的延迟时间(单位毫秒)，默认400，可选
		delay : 400,
		//在触发前用户至少需要输入的字符数，默认为1，可选
        minChars : 1,
		//跨域与否，默认true跨域，可选
		domain : true,
	}
})

keyboard_autocomplete主要代码：

// 创建闭包  
(function($) {
$.fn.extend({
	//autokeyboard定义
	autokeyboard : function(url, configuration, param, dealData) {
		//接受options参数以控制插件的行为,
		options = $.extend({}, $.Autocompleter.defaults, {
			url : url,
			extraParams : param,
			sucessData : dealData,
		}, configuration);
		return this.each(function() {
			new $.Autocompleter(this, options);
		});
	},
});

//在符合设定条件下，向url传参，按用户设定需求处理返回值
$.Autocompleter = function(input, options) {
	//。。。
}

$.Autocompleter.Select = function (options, input, select, config) {
	//。。。
}


// 插件的defaults 
$.Autocompleter.defaults = {
	//。。。
}
})(jQuery);

PS：因为代码是针对研报审核后台所写，在传出的参数中就有控制返回信息条数的设定，因此没有加上控制下拉框中显示条目数量的功能。