AutoComplete textbox can be used in an ASP.NET page with any textbox to make it autocomplete textbox. Download the ajax control toolkit from here and add it as refrence in your ASP.NET project or copy this in your bin folder of the project.
Open your .aspx page and edit it as following. Here the css code is also included in the same page. You can include this in a seperate page (stylesheet.css) if you want.
Default.aspx :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
body
{
font-family: Arial;
}
input
{
padding: 10px;
}
.CompletionList
{
background-color: #fff;
margin-top: 0px;
padding: 1px 0px 1px 0px;
}
.CompletionListItem
{
background-color: #3498db;
margin: 2px;
padding: 5px;
color: #fff;
}
.CompletionListItemHighLight
{
background-color: #34495e;
margin: 2px;
padding: 5px;
color:#fff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<table width="100%">
<tr>
<td align="center">
<h2>
ASP.NET AJAX Autocomplete Textbox</h2>
Enter Country Name :
<asp:TextBox ID="txtCountries" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="txtCountries" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="500" CompletionListItemCssClass="CompletionListItem" CompletionListCssClass="CompletionList" CompletionListHighlightedItemCssClass="CompletionListItemHighLight" ServiceMethod="GetCountries">
</asp:AutoCompleteExtender>
</td>
</tr>
</table>
</div>
<div>
</form>
</body>
</html>
Here, the “asp:AutoCompleteExtender” will show the list of the words which is beginning from the letter user inputs in the Textbox txtCountries. The minimumPrefixLegth will refer to the minimum number of letters required to show the dropdown list. ServiceMethod=”GetCountries”, this is the method name in the .aspx.cs from where the value shall be feteched from the database.
Please friends use only ToolScriptManager instead of ScriptManager as ScriptManager mightnot work for you(it didn’t worked for me. And I spend almost 1 day wondering what is wrong with my code).
Also make database and the table named Countries as following :
Default.aspx.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetCountries(string prefixText)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["h"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select * from Countries where CountryName like @country+'%'", con);
cmd.Parameters.AddWithValue("@country", prefixText);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adapter.Fill(ds);
List<string> CountriesName = new List<string>();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
CountriesName.Add(ds.Tables[0].Rows[i][1].ToString());
}
return CountriesName;
}
}
In the web.config file add your connection string as :
<connectionStrings> <add name="h" connectionString="Data Source=192.168.0.100;Initial Catalog=ASP_DB;Persist Security Info=True;User ID=hitesh;Password=789"/> </connectionStrings>
