StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POOnSelectedIndexChanged event stopped firing after I added autoComplete to dropdownlist. Any ideas why?
text
Body
copied!<p>We have a dropdownlist control with id of <code>NewEmpName</code>. This dropdownlist is automatically populated from the database with employee usernames. Users of this app use it to make requests.</p> <p>When a user logs into this system, his or her name, along with other relevant information are automatically populated into several textboxes based on the user's login name.</p> <p>If the user that logged into the system is making a request for another employee, this user selects the name of the employee sh/e is making the request on behalf of. </p> <p>By selecting the name of the employee from the <code>NewEmpName</code> dropdownlist, the textboxes containing the records of the logged on user are replaced with information belonging to the employee just selected from the dropdownlist.</p> <p>This is possible by using <code>OnSelectedIndexChanged</code> event </p> <pre><code>Sub ddl_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) empname.Text = CType(sender, DropDownList).SelectedValue </code></pre> <p>Everything was working great until I was asked to add AutoComplete feature so users can type a few characters and select the name of the employee from the dropdownlist.</p> <p>After adding this AutoComplete feature, <code>OnSelectedIndexChanged</code> event is no longer firing.</p> <p>Any ideas?</p> <p>Here is the dropdownlist codebehind:</p> <pre><code>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 </code></pre> <p>Part of the AutoComplete code that integrates with dropdownlist code:</p> <pre><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 </code></pre> <p>I can post the js code if needed but code is pretty long.</p> <p>Here is the js and the markup:</p> <pre><code><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" /> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload