Can't get AutoCompleteExtender to work

Question

User-240333334 posted

Not sure what I'm doing wrong, but typing in the textbox produces nothing. Code below

 <asp:TextBox ID="NewRoamerTB" runat="server" AutoPostBack="True"></asp:TextBox>
                    <ajaxToolkit:AutoCompleteExtender ID="NewRoamerTBACE" runat="server" TargetControlID="NewRoamerTB" ServiceMethod="GetStates" MinimumPrefixLength="1" DelimiterCharacters="" Enabled="True" CompletionInterval="200" EnableCaching="False" ServicePath="~/AutoComplete.asmx"></ajaxToolkit:AutoCompleteExtender>

AutoCompleteasmx.vb

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.Services

Namespace AutoCompleteExample
    ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    <WebService([Namespace]:="http://tempuri.org/")>
    <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
    <System.ComponentModel.ToolboxItem(False)>
    <System.Web.Script.Services.ScriptService>
    Public Class AutoComplete
        Inherits System.Web.Services.WebService
        <WebMethod>
        Public Function GetStates(prefixText As String, count As Integer, contextKey As String) As List(Of String)
            Dim states As New List(Of String)() From {
                "Alaska",
                "Alabama",
                "California",
                "North Dakota"
            }

            Return states
        End Function
    End Class
End Namespace

AutoComplete.asmx

<%@ WebService Language="vb" CodeBehind="AutoComplete.asmx.vb" Class="AutoCompleteExample.AutoComplete" %>

web.config

 <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/>

MasterPage.master

 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
                    <Services>
    <asp:ServiceReference
       path="~/AutoComplete.asmx" />   
  </Services>
                </asp:ScriptManager>

Answer 1

User-1509636757 posted

In Chrome, keep Developer Console (Press F12) open and try to invoke AutoComplete, and see if Network tab in Developer console showing you any error. You may find some more detail regarding issue.

Answer 2

User-1509636757 posted

Set some value to ContextKey property and it should work, in your code I added a static string "MySite".. but you may pass additional paramters here:

<asp:TextBox ID="NewRoamerTB" runat="server" AutoPostBack="True"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="NewRoamerTBACE" runat="server" TargetControlID="NewRoamerTB" ServiceMethod="GetStates"
    MinimumPrefixLength="1" DelimiterCharacters="" ContextKey="MySite" Enabled="True" CompletionInterval="200" EnableCaching="False" ServicePath="~/AutoComplete.asmx">
</ajaxToolkit:AutoCompleteExtender>

Related Article: ASP.Net AJAX AutoCompleteExtender: Pass Additional Parameter to WebMethod using ContextKey

Answer 3

User-240333334 posted

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. 

Parser Error Message: Could not create type 'AutoCompleteExample.AutoComplete'.

Source Error: 

Line 1: <%@ WebService Language="vb" CodeBehind="AutoComplete.asmx.vb" class="AutoCompleteExample.AutoComplete" %>

Source File: /AutoComplete.asmx    Line: 1 

Answer 4

User-240333334 posted

BTW, I am NOT married to this particular way of implementing this functionality. I've tried several, this is just the last one I tried before posting my issues on this forum.

Answer 5

User-1509636757 posted

In Solution Explorer » right click on AutoComplete.asmx.vb » Click on last option "Properties" » Make sure "Build Action" Property is set to "Compile" (It should not set to "Content")

Answer 6

User-240333334 posted

It is set to Compile

Answer 7

User-1509636757 posted

BTW, I am NOT married to this particular way of implementing this functionality. I've tried several, this is just the last one I tried before posting my issues on this forum.

You may would like to use Chosen jQuery plugin. It is very simple to configure and use. And it also keep selected option as selected (keeps states of the control I mean) between postbacks.

Here is the documentation: Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

You may get it (CSS and JS file) from this page or you can get it from NuGet with name "Harvest.Chosen". The plugin has many option for DropDownList and LsitBox type controls. Here is an example of using this plugin as AutoComplete with a ASP.NET DropDownList control:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/chosen.jquery.min.js"></script>
    <link href="Content/chosen.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            InitDropDown();
        })

        function InitDropDown() {
            var config = {
                '.ChosenSelector': { allow_single_deselect: true, search_contains: true, width: "350px" },

            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList runat="server" CssClass="ChosenSelector">
                <asp:ListItem Text="Alaska" />
                <asp:ListItem Text="Alabama" />
                <asp:ListItem Text="California" />
                <asp:ListItem Text="North Dakota" />
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>

hope that helps./.

Answer 8

User-1509636757 posted

It is set to Compile

Try doing a full rebuild. Also, you required to make sure Namespace is correct and same in both asmx design and code file

Answer 9

User-240333334 posted

I think the namespace is the problem, but I don't know how to fix it.

AutoComplete.asmx

<%@ WebService Language="vb" CodeBehind="AutoComplete.asmx.vb" class="AutoCompleteExample.AutoComplete" %>

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.Services

Namespace AutoCompleteExample
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<WebService([Namespace]:="http://tempuri.org/")>
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
<System.ComponentModel.ToolboxItem(False)>
<System.Web.Script.Services.ScriptService>
Public Class AutoComplete
Inherits System.Web.Services.WebService
<WebMethod>
Public Function GetStates(prefixText As String, count As Integer, contextKey As String) As List(Of String)
Dim states As New List(Of String)() From {
"Alaska",
"Alabama",
"California",
"North Dakota"
}

Return states
End Function
End Class
End Namespace

Answer 10

User-1509636757 posted

CodeBehind="AutoComplete.asmx.vb"

Please try removing CodeBehind="AutoComplete.asmx.vb" and see if that works; since it looks from your code like you have written code in asmx design file itself.

Answer 11

User-240333334 posted

I'm getting this error

Severity Code Description Project File Line Suppression State
Warning D:\XXX\AutoComplete.asmx: ASP.NET runtime error: The pre-application start initialization method Start on type System.Web.Optimization.PreApplicationStartCode threw an exception with the following error message: Could not load file or assembly 'Microsoft.Web.Infrastructure, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified.. snpcentralstaff D:\XXX\AutoComplete.asmx 1

Answer 12

User-1509636757 posted

Could not load file or assembly 'Microsoft.Web.Infrastructure

did you try adding reference of this assembly in project?

Answer 13

User-240333334 posted

I FINALLY GOT AutoCompleteExteneder TO WORK!!!! 

Using Chrome Developer tool(F12) to watch what happens when I started typing names in the Text box is what led me to find the solution(ish).

I abandoned using ASMX files and instead placed this code in the Code Behind.

 <System.Web.Script.Services.ScriptMethod(),
System.Web.Services.WebMethod()>
    Public Shared Function SearchCustomers(ByVal prefixText As String, ByVal count As Integer) As List(Of String)
        Dim conn As SqlConnection = New SqlConnection
        conn.ConnectionString = ConfigurationManager _
             .ConnectionStrings("SNPConnectionString").ConnectionString
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandText = "SELECT EMPLOYEE_NAME AS ContactName, Deleted FROM Personnel.EMPLOYEE_DETAILS$ where EMPLOYEE_NAME like @SearchText + '%'"
        cmd.Parameters.AddWithValue("@SearchText", prefixText)
        cmd.Connection = conn
        conn.Open()
        Dim customers As List(Of String) = New List(Of String)
        Dim sdr As SqlDataReader = cmd.ExecuteReader
        While sdr.Read
            customers.Add(sdr("ContactName").ToString)
        End While
        conn.Close()
        Return customers
    End Function

I had tried the above code previously but didn't use Chrome Develope Tools (Thanks again for suggesting it kaushalparik27) to figure out why it wasn't working. It turned out to be a simple error in the SQL. 3 DAYS OF HEADACHES AND IT WAS ALL DUE TO A SIMPLE MISS NAMED COLUMN.

I never could figure out the Parser error I was getting from the asmx files.

Thanks again you guys rock!