I had the same issue. The "mustMatch" flag causes the second request
to validate the text that was set. Make sure that the selected input
value can successfully be submitted to your ajax request and come back
with a hit. If a match is not found the the text's input field will
be cleared.
On Jan 11, 2:58 pm, "j...@verax" <joti.bis...@gmail.com> wrote:
> 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----------------------------------------------------------------------------------
