Create AutoSuggestBox.css file and place the below css Code
==========================================================
.CompletionList
{
background-repeat: repeat-x;
background-color: #FFFFFF;
z-index: 10000;
width: 245px !important;
max-height: 210px;
text-align: inherit;
text-indent: -1;
list-style: none;
overflow-y: scroll;
scrollbar-arrow-color: #B89020;
scrollbar-base-color: #8E6E1C;
scrollbar-face-color: #B6C5D4;
scrollbar-3dlight-color: #8E6E1C;
scrollbar-highlight-color: #EED47D;
scrollbar-shadow-color: #959595;
scrollbar-darkshadow-color: #00337E;
margin-left: 0px;
border-bottom: 1px solid #B5C6D4;
border-left: 1px solid #B5C6D4;
border-top: 1px solid #B5C6D4;
margin-top: 0px;
}
.CompletionListItemCssClass
{
background: none;
border-collapse: collapse;
color: #00337E;
white-space: nowrap;
text-align: inherit left;
}
.CompletionListHighlightedItemCssClass
{
background-repeat: repeat-x;
background-color: #EED47D;
color: #00337E;
border-top: 1px solid #FFF8E8;
border-left: 1px solid #FFF8E8;
border-bottom: 1px solid #00337E;
border-right: 1px solid #00337E;
}
==========================================================
Place this in .aspx file
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<link href="../App_Themes/AutoSuggestBox.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
function Common_ItemSelected(sender, e)
{
var hdnCommonID = $get('<%= hdnCommonID.ClientID %>');
hdnCommonID.value = e.get_value();
}
function Common_ItemPopulated(sender, e)
{
var hdnCommonID = $get('<%= hdnCommonID.ClientID %>');
hdnCommonID.value = '';
}
</script>
<asp:Panel ID="panAutoSuggest" runat="server">
<asp:TextBox ID="txtSearch" runat="server" MaxLength="50" OnTextChanged="txtSearch_OnTextChanged"
AutoPostBack="true" Width="182px"></asp:TextBox>
<cc1:AutoCompleteExtender ID="aceCommonCon" MinimumPrefixLength="1" OnClientPopulated="Common_ItemPopulated" OnClientItemSelected="Common_ItemSelected" runat="server" TargetControlID="txtSearch" ServiceMethod="GetCommonList" CompletionSetCount="5" Enabled="True" ServicePath="" CompletionListCssClass="CompletionList"
DelimiterCharacters=";, :" CompletionListItemCssClass="CompletionListItemCssClass"
CompletionListHighlightedItemCssClass="CompletionListHighlightedItemCssClass"
ShowOnlyCurrentWordInCompletionListItem="true">
</cc1:AutoCompleteExtender>
<cc1:TextBoxWatermarkExtender ID="txtWatermarkExtender" runat="server" TargetControlID="txtSearch"
WatermarkText="--Select--">
</cc1:TextBoxWatermarkExtender>
<asp:HiddenField ID="hdnCommonID" runat="server" />
</asp:Panel>
==========================================================
place the below code in code behind - .aspx.cs file
==================================================
[System.Web.Services.WebMethod]
public static string[] GetList(String prefixText, int count)
{
DataTable dt1 = new DataTable();
//store and get the datatable from session
dt1 = (DataTable)System.Web.HttpContext.Current.Session["EmpDT"];
List<String> suggetions = GetSuggestions(prefixText, count, dt1);
return suggetions.ToArray();
}
private static List<String> GetSuggestions(string key, int count, DataTable dt1)
{
List<String> suggestions = new List<string>();
try
{
DataRow[] dtSuggestions = dt1.Select(filterExpression);
foreach (DataRow dr in dtSuggestions)
{
string suggestion = AutoCompleteExtender.CreateAutoCompleteItem(dr["NAME"].ToString(), dr["ID"].ToString());
suggestions.Add(suggestion);
}
}
return suggestions;
}
==========================================================