combobox自己主动提示组件加入无选中项清空功能

这个标题非常绕口,只是这也是想了半天的成果,对不起体育老师了。

标题想表达的是:之前讲过的用combobox实现自己主动提示组件。只是如今规定该组件不能够保存data中不存在的数据。

最初的想法是通过onChange事件来作推断。可是无奈该函数在自己主动提示的模式下,每change一次会触发2次onChange事件,太诡异了遂放弃之。

并且onChange事件是在每次combobox中的内容改变时触发,若是keyword输入过程中,该事件一直触发。

而我们所要的效果是等用户输入结果再作校验,所以不符合要求。

查找API发现combo提供了一个onHidePanel事件的扩展点,当自己主动提示框隐藏时触发。

当时的想法是:输入完之后当然会隐藏输入框啦,感觉能够当成是完毕输入的标识。

试了试,基本能够满足要求。有点小问题。就是用户高速输入之后点击其它地方。combobox失去焦点之后,有可能连输入框都不显示,何谈隐藏?

哎~通过现有API好像都无法完美地解决这个问题,那么就仅仅有自己写了。。but 我的前端水平真是不怎么样,瞎j8鼓捣了一个版本号,大家凑合看看~

$.extend($.fn.combobox.methods, {
	completeCheck:function(jq){
		var textbox = jq.combobox('textbox');
		console.log(jq)
		textbox.on('blur', function(){
			setTimeout('doCompleteCheck("' + jq.selector + '")', 200);	// 这里先让combobox的一些操作走
		})
	}
});

function doCompleteCheck(selector){
	var jq = $(selector);
	var value = jq.combobox('getValue');
	var json = jq.combobox('getData');
	if(!findInJson(json, value)){
		jq.combobox('clear');
		jq.combobox('hidePanel');
	}
}		

我为combobox加入了一个新的方法:completeCheck

主要是为combobox中的textbox加入一个onBlur事件,这个textbox也就是我们在输入时的那个input组件。

那么当textbox失去焦点时则会触发doCompleteCheck函数。可是这里先要让combobox的一些操作先运行

所以我们给了200ms的延迟,之后通过比較是否存在在data中来决定是否须要清空combobox中的输入值

这里补充一点,事实上若是输入的内容不在data中。combobox(‘getValue‘)的值都会是undefined,所以这样也能够来推断。

使用的时候就像调用combobox的其它方法一样就能够了。$(‘#cc‘).combobox(‘completeCheck‘);

时间: 2024-10-11 23:06:25

combobox自己主动提示组件加入无选中项清空功能的相关文章

combobox自动提示组件添加无选中项清空功能

这个标题很绕口,不过这也是想了半天的成果,对不起体育老师了. 标题想表达的是:之前讲过的用combobox实现自动提示组件,不过现在规定该组件不可以保存data中不存在的数据. 最初的想法是通过onChange事件来作判断,但是无奈该函数在自动提示的模式下,每change一次会触发2次onChange事件,太诡异了遂放弃之. 而且onChange事件是在每次combobox中的内容改变时触发,若是关键字输入过程中,该事件一直触发. 而我们所要的效果是等用户输入结果再作校验,所以不符合要求. 查找

利用easyUI的combobox打造自己主动提示组件

自己主动提示是时下一个非常流行的功能,比方说百度.谷歌的搜索输入框都使用到了这么一个功能. 因为easyUI的combobox设计师已经考虑到了这个功能.所以仅仅需简单几步我们能够轻松打造自己的自己主动提示组件. 自己主动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将全部的数据都载入到client页面,之后不过在这些已载入的数据中去过滤,不会向server发出额外的请求 而remote呢,也就是说事先并不载入全部数据.而是等到用户输入keyw

利用easyUI的combobox打造自动提示组件

自动提示是时下一个很流行的功能,比如说百度.谷歌的搜索输入框都使用到了这么一个功能. 由于easyUI的combobox设计师已经考虑到了这个功能,所以只需简单几步我们可以轻松打造自己的自动提示组件. 自动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将所有的数据都加载到客户端页面,之后仅仅是在这些已加载的数据中去过滤,不会向服务器发出额外的请求 而remote呢,也就是说事先并不加载所有数据,而是等到用户输入关键字之后,再向服务器发出请求,返

Android Studio如何设置自己主动提示代码

同Eclipse时间,您可以设置,无论你是设置输入不管什么信,可以提示码,在Android Studio也可以 设置.并且比Eclipse设置来的简单. 当然假设你认为代码自己主动提示会减少你的代码水平.你也能够不设置,在写代码 过程中,假设一时忘记了,你就能够用代码提示的快捷键. android studio代码提示的快捷键是什么呢?看这篇文章: [Android Studio快捷键]之代码提示 接下来说怎样设置代码自己主动提示.如图: 图上内容比較多,我直接按区域划分成6块区域来说吧: 区域

自绘制HT For Web ComboBox下拉框组件

传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起来更直观,今天我就如何制定ComboBox自定义下拉框做一番探讨. 首先我们先来目睹下效果:   看起来跟普通的ComboBox好像也没什么特殊的,是的,按照规范的ComboBox设计,完全可以实现同样的效果,但是今天的主要任务并不是讨论有多少实现方案,今天的首要任务是介绍HT for We

Spices .Net Decompiler生成的代码具备语法高亮、缩进、可折叠和主动提示的代码

Spices .Net Decompiler控件是一款功能强大的代码恢复和反编译工具,支持转换.NET二进制格式((.EXE或.DLL)为格式化的.最佳的源代码,支持MSIL, C#, VB.NET, Delphi.NET, J# 和可管理的C++.具体功能: 转换后的代码具备良好的格式:生成的代码具备语法高亮.缩进.可折叠和主动提示 支持可视的进行反编译 正确的反编译所有类型的程序集:managed (C#, VB.NET, Delphi.NET), CompactFramework and

生成具备语法高亮、缩进、可折叠和主动提示的代码反编译控件Spices .Net Decompiler

Spices .Net Decompiler控件是一款功能强大的代码恢复和反编译工具,支持转换.NET二进制格式((.EXE或.DLL)为格式化的.最佳的源代码,支持MSIL, C#, VB.NET, Delphi.NET, J# 和可管理的C++.具体功能: 转换后的代码具备良好的格式:生成的代码具备语法高亮.缩进.可折叠和主动提示 支持可视的进行反编译 正确的反编译所有类型的程序集:managed (C#, VB.NET, Delphi.NET), CompactFramework and

猫猫学iOS之小知识之_xcode插件的删除方法_自己主动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自己主动提示,

猫猫分享,必须精品 原创文章.欢迎转载. 转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:解决解决自己主动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自己主动提示 事实上.插件神马的我们自己也能写.并没有想象中的那么难,只是眼下我们还是先解决当前问题 在做微博项目时候.抽取的分类有一个 +(instancetype)imageWithOriginalName:(NSString *)imageName; 可是调用的时候,当中字

MyEclipse参加ibatis DTD文件实现xml自己主动提示功能

当我们写ibatis当配置文件,希xml自己主动提示. 这就要求我们的加盟DTD档 SqlMapConfig.xml中开头部分有这么一句话 <!DOCTYPE sqlMapConfig PUBLIC "-//iBATIS.com//DTD SQL Map Config 2.0//EN" "http://www.ibatis.com/dtd/sql-map-config-2.dtd"> 1.MyEclipse中打开window-->Preferenc