ASP.NET Tutorial/Ajax/AutoComplete
Using Text and Value Pairs with the AutoCompleteExtender
<source lang="csharp">
<%@ 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">
<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" />
Title: <asp:Label id="lblSelectedProductTitle" runat="server" />
Primary Key: <asp:Label id="lblSelectedProductId" runat="server" />
</form>
</body> </html></source>
Using the AutoComplete Control
<source lang="csharp">
<%@ 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">
<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" />
<asp:Label id="lblSelectedProductTitle" runat="server" />
</form>
</body> </html></source>
Using the AutoCompleteExtender with a Web Service Method
<source lang="csharp">
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">
<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"/>
<asp:Label id="lblSelectedFileName" runat="server" />
</form>
</body> </html></source>