jQuery autocomplete "collateral damage" in other fields

Question

I have a jquery autocomplete field working fine followed by a date input field. Whenever a user selects an item from autocomplete list it correctly selects the item and fires result() but it also creates "collateral damage" in my date field, inserting ID of the selected autocomplete item into it. This is one case of it but I also noticed it in other occasions, sometimes if other input fields are before autocomplete field or behind, doesn't really matter. Also If there are 3 (any number) other fields all three would be inserted the autocomplete item ID.

It is undesired behaviour and I need to get rid of it. Anyone?

Here's the code:

        $("#Clients").focus().autocomplete('<%=Url.Action("GetClients", "Client") %>', {
            dataType: 'json',
            parse: function(data) {
                var rows = new Array();
                for (var i = 0; i < data.length; i++) {
                    rows[i] = { data: data[i], value: data[i].ClientName, result: data[i].ClientName };
                }
                return rows;
            },
            formatItem: function(row, i, n) {
                return row.ClientName;
            },
            width: 300,
            minChars: 0,
            max: 0,
            delay: 50,
            cacheLength: 10,
            selectFirst: true,
            selectOnly: true,
            mustMatch: true
        });

        $("#Clients").result(function(event, data, formatted) {
            if (data) {
                $(this).parent().next().find("input").val(data["client_id"]);
                if (data["ClientName"] && data["client_address1"] && data["client_postcode"] && data["client_postname"]) {
                    $("#ClientDetails").html(
                    "<li class=\"clientNumber\">Client Id: " + data["client_ClientNumber"] + "</li>" +
                    "<li>" + data["ClientName"] + "</li>" +
                    "<li>" + data["client_address1"] + "</li>" +
                    "<li>" + data["client_postcode"] + data["client_postname"] + "</li>"
                    );
                }
                else {
                    $("#ClientDetails").html(
                    "<li class=\"clientNumber\">Client Id: " + data["client_ClientNumber"] + "</li>" +
                    "<li>" + data["ClientName"] + "</li>");
                }
            }
        });

Answer 1

For me this line

$(this).parent().next().find("input").val(data["client_id"]);

looks a bit dubious.

• You are getting the parent of the input control with the ID "Clients"
• Then you move to the next item
• Find all input controls within this item
• Set the value of all found input controls to the client_id