`
tedeyang
  • 浏览: 329789 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery.autoComplete插件在focus处理上的bug

阅读更多

最近用jquery的插件autocomplete做搜索框的自动完成。(struts1.3.8 + jsp+ spring)

插件主页:http://www.pengoworks.com/workshop/jquery/autocomplete.htm

bug描述

怎么用就不管了,这里只记录一下问题:

在input键入字符后,自动提示时灵时不灵,而且找不出规律。

一开始以为是后台查询速度太慢影响了页面的反应,于是加了一层oscache缓存,但还是偶然会跳不出下拉框。

郁闷,后来用firebug调试了一遍,大概猜测问题与input的focus状态有关(但也不确定,因为开启firebug后focus是会变动的),

不管了,试试。。。

输入框的焦点是通过struts的tag实现的,

我把jsp页面中 <html:form action="ssgsIndex.do" method="post" focus="jbxx.gpdm">中的红字部分去掉,

然后添加

$(document).ready(function() {
			readyForEdit(false);
			$("#gpdm").autocomplete(
					"../../ajaxSuggest.do",
					{
						extraParams:{},
						maxItemsToShow:20,
						onItemSelect:selectItem,
						formatItem:formatItem,
						onFindValue:selectItem,
						width:400,
						lineSeperator:'\r\n',
						cellSeparator:'|',
						minChars:1,
						matchSubset:1,
						cacheLength:10,
						delay:200
					}
			); 
			$("#gpdm").focus();
			});

 

 

诶?好像不出错了啊,日食复圆了?哈哈

反复测试了几遍,确认bug就在这里。

struts的<html:form>会在form的后面生成这样一段代码:

</form>
<script type="text/javascript" language="JavaScript">
  <!--
  var focusControl = document.forms["ssgsIndexForm"].elements["gpdm"];

  if (focusControl.type != "hidden" && !focusControl.disabled && focusControl.style.display != "none") {
     focusControl.focus();
  }
  // -->
</script>

 作用是自动选定焦点,

仔细查看autocomplete的源码,其中接收数据是这样的:

	function receiveData(q, data) {
		if (data) {
			$input.removeClass(options.loadingClass);
			results.innerHTML = "";

			// if the field no longer has focus or if there are no matches, do not display the drop down
			 if( !hasFocus || data.length == 0 ) return hideResultsNow();
			if ($.browser.msie) {
				// we put a styled iframe behind the calendar so HTML SELECT elements don't show through
				$results.append(document.createElement('iframe'));
			}
			results.appendChild(dataToDom(data));
			// autofill in the complete box w/the first match as long as the user hasn't entered in more data
			if( options.autoFill && ($input.val().toLowerCase() == q.toLowerCase()) ) autoFill(data[0][0]);
			showResults();
		} else {
			hideResultsNow();
		}
	};

 

诡异的是:hasFocus这个变量的初始值被设置为false而非元素当时的实际状态,其值只能通过focus事件改变。这里,autocomplete的初始化是在struts form的初始化之后的,因此虽然input.focus=true,但hasFocus=false!

哎,页面一刷新,bug就出现了!如果你不耐烦点击来点击去偶然触发了focus事件,那么自动提示就能正常工作了,否则你就头大去吧!

 

变通办法是在autocomplete初始化后才获取焦点。

更彻底的办法是修改autocomplete的源码,

 

一个bug,浪费了我1天时间。

 

附:

1 . 完整的页面:

<html>
	<head>
		<base href="http://localhost:7001/sdps/pages/ssgs/index.jsp">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="../css/putong_1t.css">
		<script language="javascript" src="js/jquery-1.3.2.js" type="text/javascript" ></script>
		<script language="javascript" src="js/jquery.autocomplete.js" type="text/javascript" ></script>
		<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
		<title>上市公司</title>
		
	</head>
	<body>
	<div>

	 <div style="">
		<form name="ssgsIndexForm" method="post" action="/sdps/ssgsIndex.do">
			<table width="570" class="tableframe" align=center>
				<tr align="center" class="title">
					<td class="row1" colspan="2">
						请输入要新增或查询的上市公司证券代码或税务登记号:
					</td>
				</tr>
				<tr class="row">
 					<td valign="top" class="row" width="100">
						证券代码:
 					</td>
					<td valign="top" class="row" colspan="1">
 						<input name="query.gpdm"  id="gpdm" value="" size="8"></input>
 					</td>
 				</tr> 
 				<tr class="row">
 					<td valign="top" class="row" width="100">
						税务登记号:
 					</td>
					<td valign="top" class="row" colspan="1">
 						<input name="query.swdjh" value=""  id="swdjh" size="37"></input>
 					</td>
 				</tr>
 				<tr class="row">	
 					<td valign="top" class="row">
						公司名称:
 					</td>
					<td valign="top" class="row" colspan="1">
 						<input name="query.zwmc" disabled="true" id="zwmc" size="58"></input>
 					</td>
				</tr>
				<tr>
					<td valign="top" class="row" style="text-align:center" colspan="4">
					<input type="submit" value="数据维护" id='edit' />
					<input type='submit' value="新增并录入" id='add' />
					<input type="hidden" name="message.action" id="action" value="index"/>
					<input type="reset" value="清除" onclick="readyForEdit(false)"/>
 					</td>
				</tr>
			</table>	
		</form>
<script type="text/javascript" language="JavaScript">
  <!--
  var focusControl = document.forms["ssgsIndexForm"].elements["gpdm"];

  if (focusControl.type != "hidden" && !focusControl.disabled && focusControl.style.display != "none") {
     focusControl.focus();
  }
  // -->
</script>

		</div>
	</div>
		<script type="text/javascript">
		$(document).ready(function() {
			readyForEdit(false);
			$("#gpdm").autocomplete(
					"../../ajaxSuggest.do",
					{
						extraParams:{},
						maxItemsToShow:20,
						onItemSelect:selectItem,
						formatItem:formatItem,
						onFindValue:selectItem,
						width:400,
						lineSeperator:'\r\n',
						cellSeparator:'|',
						minChars:1,
						matchSubset:1,
						cacheLength:10,
						delay:200
					}
			); 
			$("#gpdm").focus();
		});
		
		function selectItem(li){
			$("#gpdm").val(li.selectValue);
			$("#swdjh").val(li.extra[0]);
			$("#zwmc").val(li.extra[1]);
			readyForEdit(true);
		}
		function formatItem(row){
			return row[0] + " ,税号: " + row[1] + ","+row[2];
		} 
		
		function readyForEdit(edit){
			if(edit){
				$("#edit").show();
				$("#add").hide();
				$("#action").val('toedit');
			}else{
				$("#edit").hide();
				$("#add").show();
				$("#action").val('toadd');
			}
		} 
	 
		</script>
</html>
 

顺便展示一下这个自动提示插件的效果图 :


 

  • 大小: 56.9 KB
2
0
分享到:
评论
3 楼 tedeyang 2009-12-15  
aronlulu 写道
偶遇旧同事,顶一个。。。。。。

 
2 楼 aronlulu 2009-09-22  
偶遇旧同事,顶一个。。。。。。
1 楼 tedeyang 2009-07-24  
可视化编辑器不太好用,我高亮代码框里的文字,结果出现了对应的css。
如果代码区域不允许高亮等效果,那就不应该提供这样的功能吧

相关推荐

    ExtAspNet_v2.3.2_dll

    -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...

    JS中解决谷歌浏览器记住密码输入框颜色改变功能

    这时,可以通过HTML属性 `autocomplete="off"` 来屏蔽浏览器的自动填充功能,以避免各种因浏览器记住密码引起的bug。具体做法是在表单输入元素中设置该属性: ```html 手机号" autocomplete="off"&gt; 密码" ...

    TinyYolo2实时视频流物体检测ONNX模型

    TinyYolo2实时视频流物体检测ONNX模型 运行 ONNX 模型,并结合 OpenCV 进行图像处理。具体流程包括: 1. 加载并初始化 ONNX 模型。 2. 从摄像头捕获实时视频流。 3. 对每一帧图像进行模型推理,生成物体检测结果。 4. 在界面上绘制检测结果的边界框和标签。

    chromedriver-linux64-134.0.6998.23(Beta).zip

    chromedriver-linux64-134.0.6998.23(Beta).zip

    Web开发:ABP框架4-DDD四层架构的详解

    Web开发:ABP框架4-DDD四层架构的详解

    chromedriver-linux64-135.0.7029.0(Canary).zip

    chromedriver-linux64-135.0.7029.0(Canary).zip

    (参考项目)MATLAB人脸门禁系统.zip

    实现人脸识别的考勤门禁系统可以分为以下步骤: 1. 采集人脸图像数据集:首先需要采集员工的人脸图像数据集,包括正面、侧面等多个角度的图像。可以使用MATLAB中的图像采集工具或者第三方库进行采集。 2. 预处理人脸图像数据:对采集到的人脸图像数据进行预处理,包括人脸检测、人脸对齐、人脸裁剪等操作。MATLAB提供了相关的图像处理工具箱,可以用于实现这些处理步骤。 3. 特征提取与特征匹配:使用人脸识别算法提取人脸图像的特征,比如使用人脸识别中常用的特征提取算法如Eigenfaces、Fisherfaces或者基于深度学习的算法。然后将员工的人脸数据与数据库中的人脸数据进行匹配,判断是否为注册员工。 4. 考勤记录与门禁控制:如果人脸匹配成功,系统可以记录员工的考勤时间,并且控制门禁系统进行开启。MATLAB可以与外部设备进行通信,实现门禁控制以及考勤记录功能。

    rdtyfv、ijij

    yugy

    企业IT治理体系规划.pptx

    企业IT治理体系规划.pptx

    基于Nutz、SSH、SSM的新闻管理系统.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,MATLAB代码:基于多目标粒子群算法冷热电联供综合能源系统运行

    基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,MATLAB代码:基于多目标粒子群算法冷热电联供综合能源系统运行优化 关键词:综合能源 冷热电三联供 粒子群算法 多目标优化 参考文档:《基于多目标算法的冷热电联供型综合能源系统运行优化》 仿真平台:MATLAB 平台采用粒子群实现求解 优势:代码注释详实,适合参考学习,非目前烂大街的版本,程序非常精品,请仔细辨识 主要内容:代码构建了含冷、热、电负荷的冷热电联供型综合能源系统优化调度模型,考虑了燃气轮机、电制冷机、锅炉以及风光机组等资源,并且考虑与上级电网的购电交易,综合考虑了用户购电购热冷量的成本、CCHP收益以及成本等各种因素,从而实现CCHP系统的经济运行,求解采用的是MOPSO算法(多目标粒子群算法),求解效果极佳,具体可以看图 ,核心关键词: 综合能源系统; 冷热电三联供; 粒子群算法; 多目标优化; MOPSO算法; 优化调度模型; 燃气轮机; 电制冷机; 锅炉; 风光机组; 上级电网购售电交易。,基于多目标粒子群算法的CCHP综合

    DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发串口通信方案,DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发实现串口通信,DSP28379D串口升

    DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发串口通信方案,DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发实现串口通信,DSP28379D串口升级方案 单核双核升级,boot升级,串口方案。 上位机用c#开发。 ,DSP28379D; 串口升级方案; 单核双核升级; boot升级; 上位机C#开发,DSP28379D串口双核升级方案:Boot串口升级技术使用C#上位机开发

    基于ASP.NET MVC+三层架构和EntityFramework的微博门户网站项目.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于PLC的双层自动门控制:光电传感触发,有序开关与延时功能实现,附程序、画面及参考文档 ,基于PLC的双层自动门控制系统:精准控制,保障无尘环境;门间联动,智能安防新体验 ,基于plc的双层自动门控

    基于PLC的双层自动门控制:光电传感触发,有序开关与延时功能实现,附程序、画面及参考文档。,基于PLC的双层自动门控制系统:精准控制,保障无尘环境;门间联动,智能安防新体验。,基于plc的双层自动门控制系统,全部采用博途仿真完成,提供程序,画面,参考文档,详情见图。 实现功能(详见上方演示视频): ① 某房间要求尽可能地保持无尘,在通道上设置了两道电动门,门1和门2,可通过光电传感器自动完成门的打开和关闭。 门1和门2 不能同时打开。 ② 第 1 道门(根据出入方向不同,可能是门 1 或门 2),是由在通道外的开门者通过按开门按钮打开的,而第 2 道门(根据出入方向不同,可能是门 1 或门 2 )则是在打开的第 1 道门关闭后自动地打开的(也可以由通道内的人按开门按钮来打开第2 道门)。 这两道门都是在门开后,经过 3s 的延时而自动关闭的。 ③ 在门关闭期间,如果对应的光电传感器的信号被遮断,则门立即自动打开。 如果在门外或者在门内的开门者按对应的开门按钮时,立即打开。 ④ 出于安全方面的考虑,如果在通道内的某个人经过光电传感器时,对应的门已经打开,则通道外的开门者可以不按开门按钮。

    黑马程序员Java品达通用权限项目,基于SpringCloud SpringBoot 的微服务框架的权限管理解决方案.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    DeepSeek+DeepResearch-让科研像聊天一样简单

    DeepSeek+DeepResearch——让科研像聊天一样简单 (1)DeepSeek如何做数据分析? (2)DeepSeek如何分析文件内容? (3)DeepSeek如何进行数据挖掘? (4)DeepSeek如何进行科学研究? (5)DeepSeek如何写综述? (6)DeepSeek如何进行数据可视化? (7)DeepSeek如何写作润色? (8)DeepSeek如何中英文互译? (9)DeepSeek如何做降重? (10)DeepSeek论文参考文献指令 (11)DeepSeek基础知识。

    基于springboot+uniapp实现的蛋糕商城小程序.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    jdepend-demo-2.9.1-10.el7.x64-86.rpm.tar.gz

    1、文件内容:jdepend-demo-2.9.1-10.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/jdepend-demo-2.9.1-10.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

Global site tag (gtag.js) - Google Analytics