Why doesn't a drop down fire index changed event?

Question

I have used Javascript on textbox to search items in my asp.net dropdown list. It works but the problem is that when an item is found and shown in dropdown then after clicking it doesn't fire SelectedIndexchange. Why ?

It does fire when I select an items among many but doesn't fire when single item appears and I click.

Code:

 <script type="text/javascript">
        var ddlText, ddlValue, ddl, lblMesg;
        function CacheItems() {
            ddlText = new Array();
            ddlValue = new Array();
            ddl = document.getElementById("<%=ddlEmployers.ClientID %>");
            //lblMesg = document.getElementById("<%=lblMsg.ClientID%>");
            for (var i = 0; i < ddl.options.length; i++) {
                ddlText[ddlText.length] = ddl.options[i].text;
                ddlValue[ddlValue.length] = ddl.options[i].value;
            }
        }
        window.onload = CacheItems;

        function FilterItems(value) {
            ddl.options.length = 0;
            for (var i = 0; i < ddlText.length; i++) {
                if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                    AddItem(ddlText[i], ddlValue[i]);
                }
            }
            lblMesg.innerHTML = ddl.options.length + " items found.";
            if (ddl.options.length == 0) {
                AddItem("No items found.", "");
            }
        }

        function AddItem(text, value) {
            var opt = document.createElement("option");
            opt.text = text;
            opt.value = value;
            ddl.options.add(opt);
        }
    </script>

Controls:

  <div class="col-md-6">
                                <div class="form-group">
                                    <%--<label for="exampleInputEmail1">Employers</label>--%>
                                    <asp:TextBox ID="txtSearch" CssClass="col-md-12" runat="server" placeholder="Search employer"
                                        onkeyup="FilterItems(this.value)"></asp:TextBox><br />
                                    <asp:DropDownList ID="ddlEmployers" AutoPostBack="true" OnSelectedIndexChanged="ddlEmployers_SelectedIndexChanged" runat="server" CssClass="form-control"></asp:DropDownList>
                                    <br />
                                    <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
                                </div>
                            </div>

SelectedIndexChanged Code:

protected void ddlEmployers_SelectedIndexChanged(object sender, EventArgs e)
    {
        try
        {
            ClsEmployee ClsEmployee = new MemberShip.Repository.ClsEmployee();

            if(ddlEmployers.SelectedValue.ToInt32() <= 0)
            {
                ddlBranches.SelectedValue = "0";
            }
            else
            {
                ddlBranches.SelectedValue =  ClsEmployeer.GetBranchByEmployerID(ddlEmployers.SelectedValue.ToInt32()) > 0 ? ClsEmployeer.GetBranchByEmployerID(ddlEmployers.SelectedValue.ToInt32()).ToString() : "0";

            }

        }
        catch (Exception ex)
        {

            ScriptManager.RegisterStartupScript(this, GetType(), "showalert", "alert(" + ex.Message + ");", true);
        }
    }

Answer 1

There will be no change in index when there is single option already set after filtering. When you click on it, then it does not satisfy the virtue of OnSelectedIndexChanged .

You can edit your code as below to verify my above statement,

        function AddItem(text, value) {
            var opt = document.createElement("option");
            opt.text = text;
            opt.value = value;
            ddl.options.add(opt);
            ddl.value = "";
        }

But doing this, will clear the dropdownlist on filtering.

Or you can have a default option as below inside FilterItems function,

function FilterItems(value) {
            ddl.options.length = 0;
            AddItem("--Please Select--", -1);
            for (var i = 0; i < ddlText.length; i++) {
                if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                    AddItem(ddlText[i], ddlValue[i]);
                }
            }
            lblMesg.innerHTML = ddl.options.length + " items found.";
            if (ddl.options.length == 0) {
                AddItem("No items found.", "");
            }
        }

Hope this helps!