Hi, I'm new to the AJAX toolkit (and AJAX) so I hope you'll forgive me asking this stupid question. I can see from the example website that it is possible to have an AutoComplete extender which if you have more than say ten suggestions, it shows the first ten and then you can scroll through the rest.
However, I can't see which bit of the example code tells it to do that. What I Here's what I've got right now.
<form id="form1" runat="server">
<asp:ScriptManager ID="AutoCompleteScriptManager" runat="server" >
<Services>
<asp:ServiceReference Path="AutoCompleteService.asmx" />
</Services>
</asp:ScriptManager>
<br />
<asp:TextBox ID="TextBox1" runat="server" Columns="40" ></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender" runat="server" TargetControlID="TextBox1" CompletionInterval="10" MinimumPrefixLength="1" ServicePath="AutoCompleteService.asmx" ServiceMethod="GetCompletionList" >
</ajaxToolkit:AutoCompleteExtender>
</form
I'd appreciate it if somebody could point me in the right direction. Thanks.
Just thought I'd bump this thread as it had gone off the front page. I'd really appreciate some help with this.
You need to use an appropriate CSS class with overflow:auto on the appropriate elements.
Set a value for CompletionListCssClass to something that controls the CSS correctly. Not being a CSS chap, I leave that exercise to somebody else :)
Hi GillouX,
Here is the sample that we set the AutoComplete's CompletionListElementID to a Panel and then set the css to the panel.
<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border:solid 1px #006699;
line-height:20px;
padding:2px;
background-color:White;
}
.AutoExtenderList
{
border-bottom:dotted 1px #006699;
cursor:pointer;
color:Maroon
}
.AutoExtenderHighlight
{
color:White;
background-color:#006699;
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TBSearch" runat="server"></asp:TextBox>
<asp:Panel runat="server" ID="myPanel" Height="100px" ScrollBars="Vertical">
</asp:Panel>
<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" BehaviorID="myACEBID" TargetControlID="TBSearch"
ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionInterval="1" EnableCaching="true" CompletionSetCount="12"CompletionListElementID="myPanel"/>
<br/><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
WebService
"C#" Class="AutoComplete" %>using System;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Collections.Generic;[WebService(Namespace ="http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService]public class AutoComplete : System.Web.Services.WebService { public AutoComplete() { } [WebMethod] public string[] GetCompletionList(string prefixText, int count, string contextKey) {// contextKey += "23"; if (count == 0) { count = 10; } if (prefixText.Equals("xyz")) {return new string[0]; } Random random =new Random(); List<string> items =new List<string>(count);for (int i = 0; i < count; i++) {char c1 = (char)random.Next(65, 90);char c2 = (char)random.Next(97, 122);char c3 = (char)random.Next(97, 122); items.Add(prefixText + c1 + c2 + c3); }return items.ToArray(); }}I hope this help.
Best regards,
Jonathan
