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

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

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

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

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

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

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

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

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

  1. $.extend($.fn.combobox.methods, {
  2. completeCheck:function(jq){
  3. var textbox = jq.combobox('textbox');
  4. console.log(jq)
  5. textbox.on('blur', function(){
  6. setTimeout('doCompleteCheck("' + jq.selector + '")', 200); // 这里先让combobox的一些操作走
  7. })
  8. }
  9. });
  10.  
  11. function doCompleteCheck(selector){
  12. var jq = $(selector);
  13. var value = jq.combobox('getValue');
  14. var json = jq.combobox('getData');
  15. if(!findInJson(json, value)){
  16. jq.combobox('clear');
  17. jq.combobox('hidePanel');
  18. }
  19. }

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

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

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

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

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

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

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

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

    自己主动提示是时下一个非常流行的功能,比方说百度.谷歌的搜索输入框都使用到了这么一个功能. 因为easyUI的combobox设计师已经考虑到了这个功能.所以仅仅需简单几步我们能够轻松打造自己的自己主 ...

  2. 【技巧】为ComboBox添加自动提示

    一.需求来源 最近有个项目用到了ComboBox控件,在演示的时候,要对Word文档中选中部分添加符合DocBook标准的标签,这些标签是DocBook中元素的集合,数据量不多,大概170多个吧,但是 ...

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

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个 ...

  4. 由于抽签HT For Web ComboBox下拉框组件

    传统HTML5的下拉框select仅仅能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅可以实现传统HTML5下拉框效果,并且可以在文本框和下拉列表中加入自己定义的小图标, ...

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

    同Eclipse时间,您可以设置,无论你是设置输入不管什么信,可以提示码,在Android Studio也可以 设置.并且比Eclipse设置来的简单. 当然假设你认为代码自己主动提示会减少你的代码水 ...

  6. [js开源组件开发]tip提示组件

    tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...

  7. Android Studio代码自己主动提示无效(not available in Power Save mode)

    针对一位博友提的问题,我这边写出来,预计还是非常多人会碰到这个问题,可是不知道怎样解决的. 就是在设置了代码自己主动提示功能后,发现不生效的,怎样设置代码自己主动提示请戳这:Android Studi ...

  8. 从后台绑定数据到ligerui 的comboBox下拉框组件

    这次来记录一下ligerUI的comboBox下拉框组件,ligerUI的API里也有相关描写叙述,上面都是前台写死数据,然后显示在组件中,我这次要说的是将后台的数据绑定到下拉框组件中,废话不多说. ...

  9. myeclipse中配置spring xml自己主动提示

    版权声明: https://blog.csdn.net/zdp072/article/details/24582173 这是一篇分享技巧的文章:myeclipse中配置spring xml自己主动提示 ...

随机推荐

  1. c#事件委托

    转载地址:http://www.cnblogs.com/wudiwushen/archive/2010/04/20/1703368.html    从序言中,大家应该对委托和事件的重要性有点了解了吧, ...

  2. POJ 3632 Optimal Parking(简单题)

    [题意简述]:就是选择一个停车地点.然后走遍全部的store后,再回到停车地点.就是走一圈.问要走的距离是多少. [分析]:能够直接求出距离的最大值与最小值,求出差值.乘以2就是最后的输出结果. // ...

  3. cocos2d-x快乐的做让人快乐的游戏3:cocos-2d 3.x中的物理世界

    Cocos2d-x 3.0+ 中全新的封装的物理引擎给了开发人员最大的便捷,你不用再繁琐与各种物理引擎的细节,全然的封装让开发人员能够更快更好的将物理引擎的机制加入�到自己的游戏中,简化的设计是从2. ...

  4. Keepalived+LVS+Nginx负载均衡之高可用

    Keepalived+LVS+Nginx负载均衡之高可用 上一篇写了nginx负载均衡,此篇实现高可用(HA).系统整体设计是采用Nginx做负载均衡,若出现Nginx单机故障,则导致整个系统无法正常 ...

  5. Jersey的RESTful简单案例demo

    REST基础概念: 在REST中的一切都被认为是一种资源. 每个资源由URI标识. 使用统一的接口.处理资源使用POST,GET,PUT,DELETE操作类似创建,读取,更新和删除(CRUD)操作. ...

  6. 09_android入门_採用android-async-http开源项目的GET方式或POST方式实现登陆案例

    依据08_android入门_android-async-http开源项目介绍及用法的介绍,我们通过最常见的登陆案例进行介绍android-async-http开源项目中有关类的使用.希望对你学习an ...

  7. js正则匹配html内容

    1.得到网页上的链接地址: string matchString = @"<a[^>]+href=\s*(?:'(?<href>[^']+)'|"" ...

  8. 基于CentOS 5.4搭建nginx+php+spawn-fcgi+mysql高性能php平台

    一.安装准备 1.1平台环境: CentOS 5.4 x86_64 GNU/Linux nginx-0.8.21 php-5.2.9 spawn-fcgi-1.6.3 mysql-5.1.34 .2系 ...

  9. 关于埃博拉(Ebola)基础研究病毒

    关于埃博拉(Ebola)病毒的基础研究 2005年.美国哈佛大学医学研究院(Harvard Medical School)James Cunningham教授关于埃博拉病毒有一项基础研究,研究成果发表 ...

  10. hdu 5035 概率论

    n服务形式,各服务窗口等候时间指数公布,求所需的等待时间. 解: 相两点:首先,等到轮到他,然后就是送达时间. 潜伏期期望每个表单1/ki(1/ki,宣布预期指数公式).总的等待时间预期1/(求和ki ...