ASP.NET Tutorial/Ajax/AutoComplete
Using Text and Value Pairs with the AutoCompleteExtender
<%@ Page Language="C#" %>
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
[System.Web.Services.WebMethod]
public static string[] GetSuggestions(string prefixText, int count)
{
MyDatabaseDataContext db = new MyDatabaseDataContext();
List<Product> products = db.Products
.Where( m => m.Title.StartsWith(prefixText) )
.OrderBy( m => m.Title )
.Take(count)
.ToList();
return products
.Select( m => AutoCompleteExtender.CreateAutoCompleteItem(
m.Title, m.Id.ToString()))
.ToArray();
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSelectedProductTitle.Text = txtProductTitle.Text;
lblSelectedProductId.Text = ace1Value.Value;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AutoComplete Page Method</title>
<script type="text/javascript">
function ace1_itemSelected(sender, e)
{
var ace1Value = $get("<%= ace1Value.ClientID %>");
ace1Value.value = e.get_value();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm1" runat="server" />
<asp:Label
id="lblProductTitle"
Text="Product:"
AssociatedControlID="txtProductTitle"
Runat="server" />
<asp:TextBox
id="txtProductTitle"
AutoComplete="off"
Runat="server" />
<ajax:AutoCompleteExtender
id="ace1"
TargetControlID="txtProductTitle"
ServiceMethod="GetSuggestions"
MinimumPrefixLength="1"
OnClientItemSelected="ace1_itemSelected"
FirstRowSelected="true"
runat="server" />
<asp:HiddenField
id="ace1Value"
Runat="server" />
<asp:Button
id="btnSubmit"
Text="Submit"
OnClick="btnSubmit_Click"
Runat="server" />
<br /><br />
Title:
<asp:Label
id="lblSelectedProductTitle"
runat="server" />
<br /><br />
Primary Key:
<asp:Label
id="lblSelectedProductId"
runat="server" />
</div>
</form>
</body>
</html>
Using the AutoComplete Control
<%@ Page Language="C#" %>
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit" %>
<%@ Import Namespace="System.Linq" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
[System.Web.Services.WebMethod]
public static string[] GetSuggestions(string prefixText, int count)
{
MyDatabaseDataContext db = new MyDatabaseDataContext();
return db.Products
.Where( m => m.Title.StartsWith(prefixText) )
.OrderBy( m => m.Title )
.Select( m => m.Title)
.Take(count)
.ToArray();
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSelectedProductTitle.Text = txtProductTitle.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AutoComplete Page Method</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm1" runat="server" />
<asp:Label
id="lblProductTitle"
Text="Product:"
AssociatedControlID="txtProductTitle"
Runat="server" />
<asp:TextBox
id="txtProductTitle"
AutoComplete="off"
Runat="server" />
<ajax:AutoCompleteExtender
id="ace1"
TargetControlID="txtProductTitle"
ServiceMethod="GetSuggestions"
MinimumPrefixLength="1"
runat="server" />
<asp:Button
id="btnSubmit"
Text="Submit"
OnClick="btnSubmit_Click"
Runat="server" />
<br /><br />
<asp:Label
id="lblSelectedProductTitle"
runat="server" />
</div>
</form>
</body>
</html>
Using the AutoCompleteExtender with a Web Service Method
File: FileService.asmx
<%@ WebService Language="C#" Class="FileService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.IO;
using System.Linq;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class FileService : System.Web.Services.WebService {
[WebMethod]
public string[] GetSuggestions(string prefixText, int count)
{
DirectoryInfo dir = new DirectoryInfo("c:\\windows");
return dir
.GetFiles()
.Where( f => f.Name.StartsWith(prefixText) )
.Select( f => f.Name )
.ToArray();
}
}
File: AutoCompleteWebService.aspx
<%@ Page Language="C#" %>
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSelectedFileName.Text = txtFileName.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show AutoComplete Web Service</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm1" runat="server" />
<asp:Label
id="lblFileName"
Text="File Name:"
AssociatedControlID="txtFileName"
Runat="server" />
<asp:TextBox
id="txtFileName"
AutoComplete="off"
Runat="server" />
<ajax:AutoCompleteExtender
id="ace1"
TargetControlID="txtFileName"
ServiceMethod="GetSuggestions"
ServicePath="~/FileService.asmx"
MinimumPrefixLength="1"
runat="server" />
<asp:Button
id="btnSubmit"
Text="Submit"
OnClick="btnSubmit_Click"
Runat="server"/>
<br /><br />
<asp:Label
id="lblSelectedFileName"
runat="server" />
</div>
</form>
</body>
</html>