Search code examples
c#asp.netcomboboxdatasetdatabase-connectivity

how to search in combobox by database


protected void Page_Load(object sender, EventArgs e)
{
    dr = new MySqlDataAdapter("select * from cus_mas_det", conn);
    ds = new DataSet();

    dr.Fill(ds, "cus_mas_det");
    DataTable CodeDesc = new DataTable();
    conn.Open();
    dr = new MySqlDataAdapter("select tvl_code, concat_ws(',', tvl_code, citi_name) citiname from code_desc where travel_mode = 'BUS'", conn);
    ds1 = new DataSet();
    dr.Fill(ds1);
    ddlfrom.DataSource = ds1;
    ddlfrom.DataTextField = "citiname";
    ddlfrom.DataValueField = "tvl_code";
    ddlfrom.DataBind();
    txtbookingdate.Text = System.DateTime.Now.ToString("yyyy/MM/dd");
    txtbookingdate.ReadOnly = true;
    txtbookingref.Text = autoid();
    txtbookingref.ReadOnly = true;
}

I have a asp page in which I have textboxes and comboboxes, I am populating the combobox from the database, as given in the above code, and I am able to populate that.
Now my problem is I want to search the elemnets by typing any words in the combobox..
For example, if I type word "Ab" it should show all the elements starting with "Ab"..
How to do that?

   <asp:ComboBox ID="ddlfrom" class="chzn-select" runat="server"  
                                            DataTextField="name" DataValueField="name" MaxLength="0" 
                                            style="display: inline;" 
                                            onselectedindexchanged="ddlfrom_SelectedIndexChanged1">

                                        </asp:ComboBox>                                       

Solution

  • You can use chosen jquery plugin from here harvesthq.github.io/chosen/

    So you can search keyword within drop-down list try this plugin.

    This may help you to use How do I use Chosen jQuery in my html file?

    Add required js and css files to page assign class to dropdown like this:-

        <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js"></script>
        <link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
    <script type="text/javascript">
    $(function(){
        $(".chzn-select").chosen();
    });
    </script>
        </head>
        <body>
    

    Assign class to your dropdown

    <asp:DropDownList ID="dr_list" runat="server" CssClass="chzn-select">
       <asp:ListItem Value="-1" Text=""></asp:ListItem>
          </asp:DropDownList>
    

    Download Here