按键精灵,即自动完成,当输入一个字段时,使用户能快速从预填充列表里找到选项。
公司的项目,如研报审核后台,有好几处都有用到同样功能的按键精灵,只是一些参数上有少许不同。为了减少重复劳动重复代码,需要一个键盘精灵的通用模块。
键盘精灵的接口说明主要有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:因为代码是针对研报审核后台所写,在传出的参数中就有控制返回信息条数的设定,因此没有加上控制下拉框中显示条目数量的功能。
分享到:
相关推荐
Telerik Collection for .NET是一款为用户提供全套开发工具和全自动检测软件,可帮助软件开发团队利用更强大的功能来更快地构建应用程序。可以设计操作系统的高级和专业用户界面报告,并可以使用不同的平台。完整的...
《Kendo UI for jQuery 2020.2.617:打造高效现代Web应用的秘密武器》 Kendo UI for jQuery是一款由Telerik公司推出的强大前端开发框架,旨在帮助开发者快速、高效地构建功能丰富的现代Web应用程序。2020.2.617版本...
《Kendo UI for jQuery R3 2020:打造高效前端开发的全面解析》 Kendo UI for jQuery是一款强大的JavaScript库,专为构建富交互式Web应用而设计。R3 2020是其在2020年的第三次重大更新,版本号2020.3.915,旨在提升...
标题 "Lazy Load Plugin for jQuery demo" 暗示这是一个关于如何使用 jQuery Lazy Load 插件的实际演示。在这个项目中,我们可以期待看到如何配置和集成该插件,以及在不同场景下它的实际运行效果。这个演示可能包含...
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应用的利器》 Kendo UI for jQuery是一款强大的前端开发框架,专为jQuery设计,旨在简化Web应用程序的构建过程。2020.2.513版本的发布,标志着这个工具集进一步提升了性能和...
《Kendo UI for jQuery 2018.3.1017:高效构建现代Web应用的利器》 Kendo UI for jQuery是一款强大的前端开发框架,2018.3.1017版本更是其发展历程中的一个重要里程碑。这个框架为开发者提供了全方位的工具和组件,...
“Jquery API for Dreamweaver”插件是提升Dw用户使用jQuery进行Web开发的得力助手,它整合了jQuery的功能,并与Dw的环境无缝对接。无论是初学者还是经验丰富的开发者,都能从中受益,提高开发效率,减少错误,打造...
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
Kendo UI for jQuery 是一款强大的前端开发框架,尤其在2017.3.1018这个版本中,它提供了一整套无限制的组件,专为jQuery开发者设计,旨在加速和简化Web应用的构建过程。这个版本包含了广泛且功能丰富的HTML5标准...
Telerik Collection for .NET 2018 R2 SP1 kendoui.for.jquery.2018.2.620.commercial
KendoUI for jQuery是Telerik公司推出的一款强大的前端开发框架,专为构建现代Web应用程序而设计。这个2023版的更新进一步提升了其在UI组件、性能优化以及开发者体验方面的功能。 首先,KendoUI的核心是jQuery库,...
《Kendo UI for jQuery 2019.1.115 商业版:构建高效JavaScript应用的利器》 Kendo UI for jQuery是一款强大的前端开发框架,由Telerik公司推出,专为构建富交互式的Web应用程序而设计。该框架的核心在于其对jQuery...
《Kendo UI for jQuery 2018.1.117:打造高效现代Web应用的秘密武器》 Kendo UI for jQuery,作为一个强大的前端开发框架,2018.1.117版本的发布,为开发者带来了更加强大的功能和优化的体验。这款工具以其丰富的...
《Kendo UI for jQuery 2019.3.917:打造高效现代Web应用的秘密武器》 Kendo UI for jQuery,一个由Telerik公司推出的强大前端开发框架,是2019年3月917版的迭代成果,为开发者提供了构建现代Web应用程序的全方位...
《Kendo UI for jQuery 2018.2.516 商业版:构建高效前端应用的利器》 Kendo UI for jQuery是一款强大的前端开发框架,由Telerik公司推出,专为构建交互式、高性能的Web应用程序而设计。2018.2.516版本是该框架的一...
在本教程中,我们将探讨如何使用jQuery_api_for_dwcs5这个插件将其集成到Dreamweaver(DWCS5)中,从而在DW环境下更方便地编写和调试jQuery代码。 首先,了解jQuery的核心概念至关重要。jQuery的核心功能包括选择器...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
《jQuery WTP 0.2 for jQuery 1.2.6 插件详解与应用》 在Web开发领域,jQuery以其简洁的API和强大的功能深受开发者喜爱。为了提高开发效率,Eclipse作为主流的Java IDE,也提供了对jQuery的支持,这就是我们今天要...