Another solution is as follows
You could use the Ajax Control Toolkit Nuget
Step 1:
Add the Ajax Control Toolkit from the Nuget Packages in your references
Step 2:
If you do not get the Ajax Control Toolkit controls into your Toolbox, you need to create a separate Tab and name it Ajax Toolkit Controls.
Then right click on it and select choose items.
Browse to location where the Ajax Control Toolkit's dll is located, select it.
You will see set of controls getting populated into the window.
Select Ok, this will result into populating the tab with the Ajax Control Toolkit Controls.
Step 3:
Since Ajax Toolkit Controls are an extra add-on package, you need to register them as a part of the page using them.If installed as a nuget, this step can be neglected.
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
Note: The tagprefix should match the tagprefix used by you in your program for the AjaxControlToolkit Controls.
Step 4:
Add the ScriptManager Control, It is required for providing support for client-side AJAX features. As a result it loads and registers the Microsoft AJAX library to enable the features.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Step 5:
Proceed by adding the ComboBox from the toolbox and configure it by linking it to your database using the SQLDataSource
The complete source code is as follows
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComboboxSample.aspx.cs" Inherits="StacksEmptied.AjaxComboboxSample" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#ComboBox1_ComboBox1_OptionList {
width: 10% !important;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:ComboBox ID="ComboBox1" AppendDataBoundItems="True" runat="server" AutoCompleteMode="Suggest" DataSourceID="SqlDataSource1" DataTextField="Fruits" DataValueField="Fruits" MaxLength="0" Style="display: inline;">
</ajaxToolkit:ComboBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:FruitsConnectionString %>" SelectCommand="SELECT * FROM [Fruits]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
I have tested this code on all the below settings Testing Environment:
Chrome Browser Version 43.0.2334.0 dev-m (64-bit)
Internet Explorer 11
Firefox 36.0.1
Visual Studio 2013 edition
