按键精灵,即自动完成,当输入一个字段时,使用户能快速从预填充列表里找到选项。
公司的项目,如研报审核后台,有好几处都有用到同样功能的按键精灵,只是一些参数上有少许不同。为了减少重复劳动重复代码,需要一个键盘精灵的通用模块。
键盘精灵的接口说明主要有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:因为代码是针对研报审核后台所写,在传出的参数中就有控制返回信息条数的设定,因此没有加上控制下拉框中显示条目数量的功能。
分享到:
相关推荐
for root, dirs, files in os.walk(dir_path): for file in files: print(os.path.join(root, file)) # 调用函数,例如获取当前目录及其子目录下的所有文件名和路径 list_files('.') ``` 在Java中,我们可以...
第一章,jQuery for Games,深入探讨了jQuery中对于游戏开发可能有用的函数。这一部分为读者提供了一个基础的了解,展示了如何利用jQuery进行游戏开发。jQuery是一个轻量级的JavaScript库,它通过简化HTML文档遍历、...
3. JavaScript和DOM方法:通过for循环遍历所有单选框,并将它们的checked属性设置为false,这种方式不依赖于jQuery。 这些方法提供了在前端开发中实现取消选中单选框的不同技术选项,开发者可以根据项目需求和个人...
微信小程序Artandw_eapp-artand
本项目是一款基于Vue和JavaScript开发的心旅途个性化推荐旅游平台设计源码,整合了513个Java文件、76个PNG图片、70个XML配置文件、62个JavaScript文件、42个Vue组件文件、28个CSS样式文件、22个HTML文件、18个YAML配置文件、16个属性文件、11个Vue模板文件,总计919个文件。平台采用现代化前端技术堆栈,旨在为用户提供个性化的旅游推荐服务。
微信小程序开发地图演示、地图导航、标记标注_echat-weapp-mpdemo
Vue和Axios文件
该项目为基于Python语言开发的HTML与任务清单关系系统,包含50个文件,其中16个为HTML文件,14个为Python源代码文件,其余包括Python编译文件、Markdown文件、图片、数据库文件、配置文件、模板文件、文本文件等,旨在为用户提供简单便捷的生活时间段安排及任务规划管理工具。
全国大学生电子设计大赛项目合集全国电赛优秀作品大学生电子竞赛历届题目
该项目是一款基于Python和pygame引擎开发的植物大战僵尸游戏,包含125个文件,涵盖93个PNG图像文件、11个Python源代码文件、10个Python字节码文件、8个GIF动画文件、1个Git忽略配置文件、1个JSON数据文件以及1个Markdown说明文件。游戏设计源码为学习游戏开发提供了丰富的实践素材。
本项目是一款以Java为核心开发的Qiniu服务端设计源码整合的RunFlow桌面端效率工具,总文件数29个,包括17个Java源文件、2个属性文件、1个Git忽略文件、1个JAR包文件、1个LICENSE文件、1个Markdown文件、1个YAML文件、1个Maven配置文件和1个命令文件。该工具旨在提升工作效率,适用于各种桌面环境下的便捷使用。
那些年,与你同分同位次的同学都去了哪里?全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据
Golang支付-微信公众号、微信应用、微信小程序、微信企业支付、支付宝网络版、支付宝应用、支付宝企业支付_支付宝
医疗辅助诊断系统-开题
该项目为东东购物网的后台开发源码,采用JavaScript为主要编程语言,辅以CSS、Java、HTML等多种语言,共包含1300个文件。具体文件类型分布如下:458个PNG图片文件、215个JavaScript文件、160个JPG图片文件、159个GIF图片文件、107个CSS样式表文件、96个Java源代码文件、28个HTML文件、24个XML文件、12个JSON文件、8个Map文件。该系统旨在提供高效、便捷的购物后台管理功能。
content_1728052071778.apk
资源视频编辑软件win781064位系统
职业心理测试人格气质情绪控制测试18个文件
那些年,与你同分同位次的同学都去了哪里?全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据