• 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');


  • 相关阅读:
    2018年工作总结
    通过js date对象获取各种开始结束日期的示例
    位运算
    Nhibernate官方体系结构图部分中文翻译
    javascript中判断变量是否存在的正确方式
    .net core 项目加载提示项目文件不完整缺少预期导入的解决办法
    dotnet core 运行程序注意事项
    关于.net 项目 nuget包还原项目失败的记录
    c#利用反射实现对类中的常量进行取值和对应常量的注释
    在ie9下在textbox框里面输入内容按enter键会触发按钮的事件
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5092697.html
Copyright © 2020-2023  润新知