How do I populate a list box on a textbox change event

Question

Simple one, but need help please. I need to populate a list box based on the values of a textbox. My sample.aspx code is as below

 <div>
        <asp:TextBox ID="TextBox1" AutoPostBack="true"  runat="server" 
            ontextchanged="TextBox1_TextChanged"></asp:TextBox>
        <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
    </div>

My sample .aspx.cs code is as below

 protected void Page_Load(object sender, EventArgs e)
    {

        DataList("page");
    }
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        DataList(TextBox1.Text);
    }

    private void DataList(String value)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("City", typeof(string));
        dt.Columns.Add("Country", typeof(string));

        for (int i = 0; i < 10; i++)
        {
            DataRow dr = dt.NewRow();
            dr["City"] = i.ToString() + value;
            dr["Country"] = i.ToString() + "A";
            dt.Rows.Add(dr);
        }


        ListBox1.DataTextField = "City";
        ListBox1.DataValueField = "Country";
        ListBox1.DataSource = dt;
        ListBox1.DataBind();
    }

The TextBox1_TextChanged is fired only if the control either goes out of focus or hit an enter or tab button on the TextBox. Any means to achieve it on the fly, eg. I will key in say "B", and I should be able to see the listbox immediately reflecting as 0B,1B,... 9B. The moment I add Ba, the listbox should modify as 0Ba,1Ba,... 9Ba.

Thanks and Regards,

cmr

You would have to try handling the keypress event on client side and post an ajax call. — XtremeBytes, Apr 14 '15 at 16:54
Or javascript, angular.js, jquery whatever but XtremeBytes is correct you need to use some client side code to update the UI without a postback. — ClintL, Apr 14 '15 at 17:23

score 0 · Answer 1 · edited May 23 '17 at 11:51

To call postback without reload all the page you need to use an UpdatePanel, if you want to use only asp.net solutions, I think these tree post will can help you.

The OnTextChanged is fired only TextBox lose the focos or return ir typed

How to update textbox onchange without postback?

call text box textchanged event automatically in asp.net

I think this is what you to do

How to make an ASP.NET TextBox fire it's onTextChanged event fire in an AJAX UpdatePanel?

How do I populate a list box on a textbox change event

1 Answers1