按键精灵,即自动完成,当输入一个字段时,使用户能快速从预填充列表里找到选项。
公司的项目,如研报审核后台,有好几处都有用到同样功能的按键精灵,只是一些参数上有少许不同。为了减少重复劳动重复代码,需要一个键盘精灵的通用模块。
键盘精灵的接口说明主要有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:因为代码是针对研报审核后台所写,在传出的参数中就有控制返回信息条数的设定,因此没有加上控制下拉框中显示条目数量的功能。
分享到:
相关推荐
EasyUI for JQuery官方文档(英文) 2019年最新最全,带书签 EasyUI for JQuery官方文档(英文) 2019年最新最全,带书签
Kendo UI for jQuery R3 2020, 2020年第3季度更新。Kendo UI for jQuery 2020 R3 2020.3.915
Lazy Load Plugin for jQuery
Kendo UI for jQuery Integration You can use the Kendo UI widgets for jQuery along with Kendo UI components for Angular in the same application. To use the Kendo UI widgets for jQuery together with ...
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jPage v1.0.8 for jQuery js分页
Telerik Collection for .NET 2018 R2 SP1 kendoui.for.jquery.2018.2.620.commercial
JQuery For DwCs插件 JQuery:1.2,1.3, Dw:Cs3,Cs4 JQuery For DwCs插件 JQuery:1.2,1.3, Dw:Cs3,Cs4
the .Net Framework for JQuery and JQueryUI
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。
kendoui for jquery 2017.3.1018 开发组件无限制版本,包含web开发的各种html5标准组件。
jQuery UI 1.8 The User Interface Library for jQuery
本文档根据hemin制作【hm@hemin.cn】的jquery文档制作而成,地址:http://hemin.cn/jq/ 文件格式是docset,主要用于Mac OS系统下非常有名的Dash软件,windows用户请勿下载。下载后双击即可自动打开Dash软件导入,...
jQuery UI 1.7 - The User Interface Library for jQuery 電子書
UI 开发资源