设为首页 加入收藏

TOP

combobox自动提示组件添加无选中项清空功能
2015-07-20 17:33:45 来源: 作者: 【 】 浏览:3
Tags:combobox 自动 提示 组件 添加 选中 清空 功能

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

标题想表达的是:之前讲过的用combobox实现自动提示组件,不过现在规定该组件不可以保存data中不存在的数据。

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

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

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

查找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');


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇C++调用Lua 下一篇HDU 4585 Shaolin(STL map)

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·CPython是什么?PyPy (2025-12-26 06:50:09)
·Python|如何安装seab (2025-12-26 06:50:06)
·python要学习数据分 (2025-12-26 06:50:03)
·每日一道面试题-多线 (2025-12-26 06:20:17)
·java项目中哪些地方 (2025-12-26 06:20:14)