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

我会带着你远行 2022-08-13 00:36 119阅读 0赞

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

标题想表达的是：之前讲过的用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');

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关清空选中_回收站清空了怎么恢复？

回收站清空了文件怎么恢复？回收站里的文件被删除了，如何还原删除的文件呢？被Shift+Delete彻底删除的文件如何恢复呢？本文将详细介绍误删除文件恢复方法，清空了回收站也可以

系统管理员/ 2023年01月07日 08:47/ 0 赞/ 144 阅读

相关 EasyUI combobox选中项变化事件存在的问题

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 写法 3. 实际存在的问题 1. 背景 comb

绝地灬酷狼/ 2022年12月31日 01:11/ 0 赞/ 77 阅读

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

这个标题很绕口，不过这也是想了半天的成果，对不起体育老师了。标题想表达的是：之前讲过的用combobox实现自动提示组件，不过现在规定该组件不可以保存data中不存在的数据

我会带着你远行/ 2022年08月13日 00:36/ 0 赞/ 120 阅读

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

自动提示是时下一个很流行的功能，比如说百度、谷歌的搜索输入框都使用到了这么一个功能。由于easyUI的combobox设计师已经考虑到了这个功能，所以只需简单几步我们可以轻

逃离我推掉我的手/ 2022年08月12日 21:30/ 0 赞/ 194 阅读

相关用户名和密码自动清空

初次来到这个公司，总是有很多的不适应，不断的意识到自己的知识学的是那么的浅薄。都怪自己以前是很懒，很多代码没有实践，导致在实践的时候处处碰壁。下面介绍一下作为菜鸟的我遇到的一个

Dear 丶/ 2022年08月03日 14:36/ 0 赞/ 145 阅读

相关机房那些事儿---清空combobox

最近，在敲机房收费系统的添加用户时遇到了一丢丢问题。 ![Center][] 本来是这样一个界面，当你运行的时候，本着为人民服务的原则，有如下三种情况需要清空框框

青旅半醒/ 2022年07月13日 07:55/ 0 赞/ 147 阅读

相关 MyEclipse添加提示功能-自动补全

问题描述：给MyEclipse添加提示功能，希望输入每一个字母都能提示，同样适用于Eclipse 操作步骤： 1.window->Preferences ![70

快来打我*/ 2022年05月28日 03:51/ 0 赞/ 284 阅读

相关 eclipse代码添加自动提示功能

1.首先，我们打开eclipse，选择菜单栏的window选项。 ![70][] 2.点击Windows，选择下拉菜单里面的preferences选项，之后在打开的对

待我称王封你为后i/ 2022年05月24日 01:41/ 0 赞/ 250 阅读

相关 combobox空间clear清空选中、loadData清空option、getValue获得选中、setValue设置值之简单粗暴教程

$('id').combobox('clear');//清空选中项 $('id').combobox('loadData', {});//清空opt

迈不过友情╰/ 2021年11月17日 06:48/ 0 赞/ 760 阅读

相关 QTableWidget添加Spinbox、ComboBox，ComboBox下拉选项添加Tip提示等

1 前言最近做了一个对Json文件进行属性键值增删、修改的小工具。这里总结一下遇到的一些较为麻烦的问题，以及踩过的一些坑，方便自己回顾。也希望能让需要的人可以少绕些弯路

喜欢ヅ旅行/ 2021年11月08日 17:02/ 0 赞/ 611 阅读