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

tedeyang

浏览: 331115 次
性别:
来自: 上海

最近访客更多访客>>

u011893509

sunjia19900616

xieyuncs123

u010022792

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术

jQuery JavaScript CSS Struts Firebug

最近用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>

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

查看图片附件

2
顶

0
踩

分享到：

失败了，flash与js互通 | 论见义勇为的林老板不要奖金

2009-07-23 16:40
浏览 7210
评论(3)
查看更多

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"> 密码" ...

Qt 采用http通信json解析读取天气: Qt 采用http通信json解析读取天气

岗位晋升360度调查表.doc: 岗位晋升360度调查表.doc

合法辞退员工的N种方式.pptx: 合法辞退员工的N种方式.pptx

大模型、Agent、具身智能及人形机器人学习全路径规划.pdf: 大模型、Agent、具身智能及人形机器人学习全路径规划.pdf

华润万家员工手册.doc: 华润万家员工手册.doc

招聘需求分析.xls: 招聘需求分析.xls

光伏+蓄电池系统中双有源桥DC-DC变换器的Matlab仿真与MPPT及闭环控制实现: 内容概要：本文详细介绍了基于‘光伏（PV）+蓄电池+负载’架构的双有源桥DC-DC变换器仿真方法及其在Matlab 2021b中的具体实现。首先解析了光伏系统的MPPT控制，通过扰动观察法使光伏板始终处于最大功率点。接着讨论了蓄电池的恒流充放电控制，利用PI控制器确保电池的安全和高效运作。然后阐述了双有源桥DC-DC变换器的闭环控制机制，借助PID控制器维持系统输出电压的稳定性。最后，文章展示了如何在Matlab Simulink环境下构建完整的仿真模型，涵盖各模块间的电气连接与信号交互，为新能源系统的优化提供了理论和技术支持。适合人群：从事电力电子、新能源系统设计的研究人员和工程师，尤其是那些需要深入了解光伏储能系统工作原理的人群。使用场景及目标：适用于希望掌握光伏储能系统中关键组件如MPPT、恒流充放电控制及双有源桥DC-DC变换器的设计与仿真的技术人员。目标是在实际工程项目中提高系统的效率和可靠性。其他说明：文中提供的代码片段和建模思路有助于读者更好地理解和实践相关技术，同时也强调了一些常见的陷阱和调试技巧，帮助避免潜在的问题。

数学建模_Matlab_SPSS_教程分享_学习用途_1742838826.zip: 线性代数

电机调速技术解析：直流电机双闭环与多种电机滞环调速方法对比: 内容概要：本文详细介绍了不同类型电机的调速方法，重点探讨了直流电机双闭环调速、永磁同步电机电流滞环闭环调速以及异步电机滞环电流调速。文中不仅提供了每种调速方法的基本原理和技术特点，还附带了相应的代码示例进行辅助解释。此外，文章对永磁同步电机的电流滞环调速与SVPWM调速进行了对比，指出了各自的优劣之处。最后，强调了在实际应用中选择合适调速方案的重要性。适合人群：从事电机控制系统设计与开发的技术人员，尤其是有一定电机控制基础的研发人员。使用场景及目标：适用于需要深入了解电机调速机制及其应用场景的专业人士。目标是帮助读者掌握不同电机调速方法的特点，以便在实际工程中做出最优选择。其他说明：文章通过具体的代码实例展示了调速方法的实际应用，使读者能够更好地理解和实践相关技术。同时提醒读者在实际调试过程中要注意参数设置和硬件条件的影响。

人员晋升推荐表.xls: 人员晋升推荐表.xls

员工生日关怀方案.doc: 员工生日关怀方案

模拟IC设计：解析国际知名大厂的SAR、Sigma-Delta和Pipeline ADC逆向工程: 内容概要：本文详细介绍了对国际知名大厂的三个逆向ADC电路（SAR ADC、Sigma-Delta ADC和Pipeline ADC）进行深入剖析。作者通过Cadence Virtuoso平台研究了这些电路的标准单元库设计，探讨了各个电路的关键技术和实现细节。对于24bit Sigma-Delta ADC，重点讨论了其调制器部分的时钟相位分配和噪声整形技术；对于16bit SAR ADC，则关注其比较器阵列的独特设计以及动态锁存比较器的应用；而对于14bit Pipeline ADC，着重分析了其级间放大器设计和电荷共享技术。此外，文中还提到了在将这些设计适配到自家工艺过程中遇到的问题及其解决方案，如电容寄生效应、时序约束调整、运放结构优化等。适合人群：从事模拟集成电路设计的专业人士，尤其是对ADC设计感兴趣的工程师和技术研究人员。使用场景及目标：帮助读者深入了解高精度ADC的工作原理和设计技巧，掌握逆向工程技术在实际项目中的应用，提高对不同工艺节点下ADC设计的理解和适应能力。其他说明：文中提供了大量具体的代码片段和仿真命令，便于读者理解和实践。同时，作者分享了许多宝贵的经验教训，强调了在逆向工程中需要注意的技术细节和潜在风险。

大型立体仓库智能物流系统的PLC控制与优化设计: 内容概要：本文详细介绍了大型立体仓库智能物流系统的构建与优化。该项目涉及一万多个库位、一百多台输送机和八台堆垛机，采用了西门子PLC作为控制核心，通过无线网桥与WCS和WMS系统对接。文章重点讲解了梯形图编程和功能块的应用，如输送机启停控制、堆垛机移动控制、路径规划、无线通讯处理以及异常处理机制。此外，还探讨了设备协同、逻辑优化、任务分配算法和速度曲线规划等方面的技术细节。适合人群：从事工业自动化、智能仓储系统设计与开发的工程师和技术爱好者。使用场景及目标：适用于智能仓储系统的设计、实施和维护，旨在提高系统的稳定性、效率和可维护性。其他说明：文中提供了大量实际项目中的代码示例和调试经验，有助于读者理解和应用相关技术。

新员工月工作总结表.xlsx: 新员工月工作总结表.xlsx

西门子PLC汽车电子零件装配线SCL语言模块化编程与集成解决方案: 内容概要：本文详细介绍了基于西门子S7-1500 PLC的汽车电子零件装配线集成解决方案。主要内容涵盖伺服轴控制、阿特拉斯拧紧枪控制、康耐视视觉检测系统以及HMI界面的设计与实现。文中展示了如何利用SCL语言将多种工业设备（如HMI、伺服电机、六轴机器人等）的功能封装为标准化功能块，从而提高系统的模块化程度和可复用性。同时，还分享了一些实际项目中的调试经验和优化技巧，如通过调整加减速曲线避免机械振动、设置扭矩保持时间和视觉检测的防抖定时器等。适合人群：从事自动化控制领域的工程师和技术人员，尤其是熟悉PLC编程和工业自动化设备集成的专业人士。使用场景及目标：适用于汽车制造行业的生产线控制系统设计与实施。主要目标是帮助工程师快速掌握如何使用SCL语言构建高效稳定的PLC控制系统，提升生产效率和产品质量。其他说明：文中不仅提供了详细的代码示例，还结合具体的应用场景进行了深入剖析，有助于读者更好地理解和应用相关技术。此外，强调了模块化编程的优势，如减少重复劳动、便于维护升级等。

嵌入式系统中基于STM32/AT32/GD32的串口IAP Bootloader实现与远程升级方案: 内容概要：本文详细介绍了如何在STM32、AT32和GD32等Cortex-M系列MCU上实现串口IAP（In Application Programming）Bootloader，支持远程升级及RS485升级。主要内容涵盖Bootloader的工作原理、内存分配、通信协议设计、Flash写入操作以及跳转应用程序的关键步骤。文中提供了具体的代码示例，如Bootloader主循环、RS485收发控制、Flash写入、CRC校验等，并分享了多个实战经验和注意事项，确保数据传输的可靠性。适合人群：从事嵌入式系统开发的技术人员，尤其是对STM32、AT32、GD32等国产MCU有一定了解并希望掌握串口IAP技术的研发人员。使用场景及目标：适用于需要远程升级固件的嵌入式项目，帮助开发者避免现场升级带来的不便，提高设备维护效率。目标是让读者能够独立实现一个可靠的串口IAP Bootloader，掌握RS485通信和Flash编程的关键技术。其他说明：文中提到的代码和配置已在GitHub上提供，方便读者下载和实践。同时，作者分享了许多实战经验和常见问题解决方案，有助于减少开发过程中可能出现的问题。

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论