Ajax Control Toolkit Autocomplete extender

Question

I've followed this guide (http://www.asp.net/ajaxlibrary/act_AutoComplete_simple.ashx) to use the autocomplete extender and it works however when implimenting into my larger project i can't for the life of me see the difference. Is it a problem to have the extender nested withing table elements?

anyway, i have the auto complete extender calling a dumbby method from the tutorial just to get started. Not using a webservice but just a method (like in the guide). The page uses a master page, is that known to cause problems? heres the header

<%@ Page Title="Report" Language="C#" MasterPageFile="~/Doctors/MasterPage.master" AutoEventWireup="true" CodeFile="generateReport.aspx.cs" Inherits="Doctors_generateReport"
maintainScrollPositionOnPostBack="true" %>
<style>...</style>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:toolkitscriptmanager ID="ToolkitScriptManager1" runat="server" >
</asp:toolkitscriptmanager>
    <p class="headingStyle"><strong><em>Clinical Report</em></strong></p>
<table>

and the textbox:

<td class=logicalDivide>Current Medication:</td>
<td class=logicalDivide>
    <asp:TextBox ID="tbCMed" runat="server" CssClass="textbox" Width="178px" MaxLength="30" Font-Names="Calibri" onfocus="{ this.value = ''; }"></asp:TextBox>
    <asp:autocompleteextender
        ID="AutoCompleteExtender1" 
        runat="server"
        TargetControlID="tbCMed"
        ServiceMethod="GetCompletionList4" UseContextKey="True">
    </asp:autocompleteextender>
</td>

and the code behind:

[WebMethod]
[ScriptMethod]
public static string[] GetCompletionList4(string prefixText, int count, string contextKey)
{
   // Create array of movies  
   string[] movies = { "Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II" };

   // Return matching movies  
   return movies.Where(m => m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase)
                .Take(count)
                .ToArray();
}

Edit 1: This question is similar (http://stackoverflow.com/questions/791361/trying-to-get-a-simple-example-of-asp-net-ajax-dropdownlist-autocomplete-extende?rq=1) but like the demo, it works on its own but not in my application.

Therefore their must be some settings in the Masterpage or web.config that are altering the toolkits behavior. Any ideas ?

Edit 2: I've just tried putting the ToolScriptManager in the master page - no dice ; and... added

EnabledPageMethods="true"

to the ToolScriptManager - still no dice.

One last relevant snippet from the web.config:

<pages>
  <controls>
    <add tagPrefix="asp" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
  </controls>
</pages>
<identity impersonate="true"/>

Answer 1

I gave up on the Ajax Control Toolkit. Heres a jQuery solution (noticable faster than the Control Toolkit ...before it stoped working!!):

<div class="ui-widget">

    <asp:TextBox ID="tbScripts" ClientIDMode="static" runat="server" CssClass="textbox" 
            Width="340px" MaxLength="20" Font-Names="Calibri"  onfocus="{ this.value = ''; }"
                ToolTip="add a medication/script to the managment plan"></asp:TextBox>

        <script type="text/javascript" >
        PageMethods.GetMeds(function (results) {
            $('#tbScripts').autocomplete({
                source: results,
                minLength: 3
            });
        });

... and the code behind:

    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
   public static string[] GetMeds()//prefixText)//string prefixText, int count, string contextKey)
   {
      /* ------ database query goes here ----------- */
      return results[];
   }

and put these inside the scriptManager:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />

Answer 2

Here my solution, I'm using webservices to call a function for autocomplete.

Assuming that you have AjaxControlToolKit correctly installed follow this steps

In master page

1. Add the following line at top of your .aspx page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

2. Add the following line after form id="form1" runat="server"

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   <Services>
      <asp:ServiceReference Path="~/AutoComplete.asmx" />
   </Services>
</asp:ToolkitScriptManager>

3. Add your textbox and the AutoCompleteExtender

<asp:TextBox ID="tbSearch" runat="server"></asp:TextBox>

<asp:AutoCompleteExtender 
                    TargetControlID="tbSearch"
                    ServicePath="AutoComplete.asmx"
                    ServiceMethod="GetCompletionList"
                    MinimumPrefixLength="3"
                    CompletionInterval="100"
                    CompletionSetCount="5"
                    EnableCaching="false"
                    CompletionListCssClass="CompletionList"
                    CompletionListItemCssClass="CompletionListItem"
                    CompletionListHighlightedItemCssClass="CompletionListHighlightedItem"
                    UseContextKey="True"
                    ID="AutoCompleteExtender1" 
                    runat="server"></asp:AutoCompleteExtender>

4. Create a webservice

Solution Explorer -> Right Clic -> Add New Item... -> Web Service (I remane it to AutoComplete.asmx) and then press button Add

In Web Services AutoComplete.asmx

5. Open AutoComplete.vb file and uncomment the following line

'<System.Web.Script.Services.ScriptService()> _

In VB this line is comment by default, and it's needed for allow Web Service to be called from script, using ASP.NET AJAX

6. Add your asp:AutoCompleteExtender ServiceMethod called Public Function GetCompletionList

<System.Web.Services.WebMethod()>
    <System.Web.Script.Services.ScriptMethodAttribute()>
    Public Function GetCompletionList(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
        ' Create array of movies
        Dim movies() As String = {"Star Wars", "Star Wars 1", "Star Wars 2", "Star Trek 3", "Star Wars", "Star Wars", "Superman", "Super woman", "Memento", "Shrek", "Shrek II"}

        ' Return matching movies
        Return (
            From m In movies
            Where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase)
            Select m).Take(count).ToArray()

    End Function

NOTE: take care of

<System.Web.Services.WebMethod()>

and

<System.Web.Script.Services.ScriptMethodAttribute()>

Refresh your web page and test it

I hope help you and future others.