Hi,
I have been using the jquery autocomplete plug-in for some time now
and find it very useful. Lately I have come across the following
problem in one of my JSP pages.
The autocomplete suggestions are displayed and formatted properly. But
when I select the one that I want, the result briefly appears in the
input field and disappears. Simultaneously, the entered result
automatically triggers another jquery search.
The contents of my JSP page is given below. The same jquery code works
perfectly well with other JSPs. Can anyone help ?
------------------JSP
code----------------------------------------------------------------------------------------------------
<%@ include file="../common/include.jsp" %>
<script>
var cols = []; // column mappings : 0=Last name,
1=First Name,
2=Title, 3 = Employee ID
$().ready(function() {
$('input#employeeLastName').flushCache();
$("#employeeLastName").autocomplete("jsp/common/getData.jsp?
dataType=EmployeeName",{
minChars: 1,
max: 1000,
width: 400,
delay: 1000,
selectFirst: false,
autoFill: false,
cacheLength: 20,
matchContains: false,
matchSubset: true,
mustMatch: true,
matchCase: true,
formatItem: function(row, i, max) {
cols = row[0].split("%");
return i + "/" + max + ": " +
cols[0] + ", " + cols[1] + " (" +
cols[2] + ")";
},
formatMatch: function(row) {
cols = row[0].split("%");
return cols[0] + ", " + cols[1];
},
formatResult: function(row) {
cols = row[0].split("%");
return cols[0] + ", " + cols[1]
+ " (" + cols[2] + ")";
}
});
$("#employeeLastName").result(function(event,
row, formatted) {
if (row) {
cols = row[0].split("%");
$(this).next().val(cols[3]);
}
});
});
</script>
<tiles:importAttribute name="task" />
<tiles:importAttribute name="action" />
<tiles:importAttribute name="displayAction" />
<tiles:importAttribute name="showArchived" />
<style type="text/css">
@import "${pageContext.request.contextPath}/css/employee/select.css";
</style>
<h1>
<fmt:message key="employee.label.title.select" />
</h1>
<hr />
<div id="employeeSelect">
<tiles:insert definition="successMessages" />
<tiles:insert definition="failureMessages" />
<ccrd:errors />
<html:form action="${action}" method="post" >
<label for="employee" id="employeeLbl" >
<fmt:message key="employee.text.selectEmployee" />
<span class="task"><fmt:message key="${task}" />:</span>
</label>
<html:text styleId="employeeLastName" property="lastName"
size="100"
maxlength="200">
</html:text>
<html:hidden property="employeeId" />
<BR/> <BR/>
<div class="buttons">
<html:submit property="submit"
styleId="submitButton"><fmt:message
key="button.submit"/></html:submit>
<html:submit property="cancel"
styleId="cancelButton"><fmt:message
key="button.cancel"/></html:submit>
</div>
</html:form>
</div>
---------------------------end of jsp
code----------------------------------------------------------------------------------
