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

最新推荐文章于 2020-12-30 08:56:54 发布

yooylet

最新推荐文章于 2020-12-30 08:56:54 发布

阅读量552

点赞数

分类专栏：技术文章标签： jQuery JavaScript CSS Struts Firebug ViewUI

技术专栏收录该内容

94 篇文章 0 订阅

订阅专栏

最近用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="清除" οnclick="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>