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‘);

时间: 2024-08-05 06:37:29

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

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

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

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

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

类似input框内最右边添加图标,有清空功能

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- js引入 --> <script type="text/javascript" src="../js/jquery-1.1

关于如何利用suggest添加Solr中自动提示功能的简介

suggest 是搜索引擎一个方便的功能,对数据的关键字进行预测和建议,减少了用户的输入,大体的效果如下: 幸运的是 solr 也提供了类似的功能,在该功能的基础上,配合 jQuery 或 kissy 的自动完成组件就可以实现类似上面的功能. 启动该功能的过程大体如下: suggest 的功能依赖拼写组件,solr_home/data 目录下会有一个 spellchecker 目录,该目录用于存放 suggest 和 拼写检查的索引库,所以要先配置 spell 功能,配置如下: 在solrcon

c#(winform)中ComboBox添加Key/Value项、获取选中项、根据Key

WinForm下的ComboBox默认是以多行文本来设定显示列表的, 这通常不符合大家日常的应用, 因为大家日常应用通常是键/值对的形式去绑定它的. 参考了一些网上的例子,最终写了一个辅助类用于方便对ComboBox的操作: 用下面这个类的实例作为ComboBox的添加项: using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; namespace tp7309.

MFC CListCtrl 将一个列表的选中项添加到另一个列表

MFC CListCtrl 将一个列表的选中项添加到另一个列表, 用VC6.0实现: 简单记录一下自己的学习历程, 和大家分享,如果对你有用,我很高兴. 1.新建一个基于对话框的工程(Dialog-Based) 1.1 新建项目 打开VC6.0 -> File -> New -> Projects -> MFC AppWizard[exe] -> 工程名CListCtrlEg -> 点击OK ->Dialog based -> Finish -> OK

Ecplise添加XML自动提示

这里以struts.xml为例 第一步: 首先找到 struts2的核心jar包,我这里是struts2-core-2.3.20.jar用压缩工具打开或者解压下来 找到struts-2.3.dtd文件,将其复制出来. 接下来打开ecplise,打开想要添加自动提示的XML,我这里是struts.xml 复制 http://struts.apache.org/dtds/struts-2.3.dtd . 然后点击ecplise上边的菜单 Window --> Preferences ,找到最下面的X

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

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

java_eclipse添加DID实现自动提示

便捷无错开发 对于xml 配置没有自动提示是多么恼火就不用说了,eclipse本身很多都是默认关闭了的,如果开发者不知道的话,就不知道怎么去设置,下面介绍几种自动提示设置的方法: XML:获得提示更好的编写配置,把错误减少,添加did文件实现自动提示功能 引用did:<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.d