The OnSelectedIndexChanged event stopped firing after I added autoComplete to the drop-down list. Any ideas why?

Question

We have a dropdownlist control with the identifier NewEmpName . This drop-down list is automatically populated from the database with user names. Users of this application use it to execute queries.

When a user logs into this system, his or her name, along with other relevant information, is automatically filled in several text fields based on the user name.

If the user who is logged in makes a request for another employee, this user selects the name of the sh / e employee making the request on behalf of.

By selecting the employee name from the NewEmpName drop-down list, the text fields containing the registered user records are replaced with information belonging to the employee just selected from the drop-down list.

This is possible using the OnSelectedIndexChanged event OnSelectedIndexChanged

 Sub ddl_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) empname.Text = CType(sender, DropDownList).SelectedValue 

Everything worked perfectly until I was asked to add an autocomplete function so that users can enter several characters and select the employee name from the drop-down list.

After adding this autocomplete function, the OnSelectedIndexChanged event no longer fires.

Any ideas?

Here is the codebehind drop-down list:

 Public Sub FillUsers() Dim cmd As New SqlCommand("Select SAMAccountName from ActiveDirectory order by SAMAccountName ASC", New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)) cmd.Connection.Open() Dim ddlValues As SqlDataReader ddlValues = cmd.ExecuteReader() newEmpname.DataSource = ddlValues newEmpname.DataValueField = "SAMAccountName" newEmpname.DataTextField = "SAMAccountName" newEmpname.DataBind() Me.newEmpname.Items.Insert(0, "newEmpname") cmd.Connection.Close() cmd.Connection.Dispose() End Sub 

Part of the autocomplete code that integrates with the dropdownlist code:

 Class Item Private _val As String Private _id As String Public Property sAMAccountName() As String Get Return _val End Get Set(ByVal value As String) _val = value End Set End Property End Class 

I can send js code if necessary, but the code is quite long.

Here is the js and markup:

 <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script> <meta charset="utf-8"> <style type="text/css"> .ui-button { margin-left: -1px; } .ui-button-icon-only .ui-button-text { padding: 0.35em; } .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } </style> <script type="text/javascript"> function optionSelected(selectedValue) { document.title = selectedValue; } (function ($) { $.widget("ui.combobox", { _create: function () { var self = this, select = this.element.hide(), selected = select.children(":selected"), value = selected.val() ? selected.text() : ""; var input = this.input = $("<input>") .insertAfter(select) .val(value) .autocomplete({ delay: 0, minLength: 0, source: function (request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response(select.children("option").map(function () { var text = $(this).text(); if (this.value && (!request.term || matcher.test(text))) return { label: text.replace( new RegExp( "(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi" ), "<strong>$1</strong>"), value: text, option: this }; })); }, select: function (event, ui) { ui.item.option.selected = true; self._trigger("selected", event, { item: ui.item.option }); //JK optionSelected(ui.item.option.value); }, change: function (event, ui) { if (!ui.item) { var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), valid = false; select.children("option").each(function () { if ($(this).text().match(matcher)) { this.selected = valid = true; return false; } }); if (!valid) { // remove invalid value, as it didn't match anything $(this).val(""); select.val(""); input.data("autocomplete").term = ""; return false; } } } }) .addClass("ui-widget ui-widget-content ui-corner-left"); input.data("autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "</a>") .appendTo(ul); }; this.button = $("<button type='button'>&nbsp;</button>") .attr("tabIndex", -1) .attr("title", "Show All Items") .insertAfter(input) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("ui-corner-right ui-button-icon") .click(function () { // close if already visible if (input.autocomplete("widget").is(":visible")) { input.autocomplete("close"); return; } // pass empty string as value to search for, displaying all results input.autocomplete("search", ""); input.focus(); }); }, destroy: function () { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call(this); } }); })(jQuery); $(function () { $("#<%= newEmpName.ClientID%>").combobox(); $("#toggle").click(function () { $("#<%= newEmpName.ClientID%>").toggle(); }); }); </script> **Markup:** <asp:DropDownList ID="newEmpName" OnSelectedIndexChanged="ddl_SelectedIndexChanged" runat="server" CssClass="style26" AutoPostBack="True" /> 

Answer 1

With completion, the selected index no longer changes, it is always the first, with the completion of the list of possible alternatives, but the index of the selected item does not change, it is always 0. Try, maybe with some trigger based on the content.