键盘精灵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 type="text" id="keyword"/>
$(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,}})// 创建闭包 (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);