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>
