Ajax Control Toolkit AutoCompleteExtender displays html source character by character of the current page as autocomplete suggestion list

Question

I am trying to implement the autocomplte example on http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx to my own web page.

Author says;

Here I am explaining, how to use AJAX AutoCompleteExtender Control directly with ASP.Net Web Page without using any web service.

I have

downloaded AjaxControlToolkit
installed the toolikt
written the code according to my own aim.

My code is as the following:

<!--Default.aspx-->
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
...

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

...

<asp:TextBox ID="txt_searchTerm" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
     CompletionInterval="200" MinimumPrefixLength="4" EnableCaching="false"
     CompletionSetCount="10" TargetControlID="txt_searchTerm"
     FirstRowSelected="false" ServiceMethod="searchInDictionary">
</cc1:AutoCompleteExtender>

//Default.aspx.cs

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> searchInDictionary(string prefixText, int count)
{
    using (OleDbConnection conn = new OleDbConnection())
    {
        conn.ConnectionString = ConfigurationManager
                .ConnectionStrings["myConnectionString"].ConnectionString;
        using (OleDbCommand cmd = new OleDbCommand())
        {
            cmd.CommandText = "SELECT word FROM Dictionary WHERE word LIKE  @searchTerm + '%'";
            cmd.Parameters.AddWithValue("@searchTerm", prefixText);
            cmd.Connection = conn;
            conn.Open();
            List<string> result = new List<string>();
            using (OleDbDataReader dr = cmd.ExecuteReader())
            {
                while (dr.Read())
                {
                    result.Add(dr["word"].ToString());
                }
            }
            conn.Close();
            return result;
        }
    }

After typing 4 characters into the textbox I get a list which holds too many chacarters that are the current page's html source. There is only one character of the source code on each line. It is like

<
!
D
O
C
T
Y
P
E
...

till

<
/
h
t
m
l
>

enter image description here

I am trying to autocomplete the word "Cancer". I type "canc" and it lists HTML source.

I have inspected the page using FireBug In the XHR section of Net tab, a POST action fires and the values are below:

JSON

count   10
prefixText  "canc"

Source

{"prefixText":"canc","count":10}

Could you tell me what text do you rally have in word's 1st column in your database — Venkataraghavan Yanamandram, Dec 31 '14 at 08:34
Try to debug to see if the `searchInDictionary` method is executed and what's the result of its execution. — dario, Dec 31 '14 at 08:50
Sounds like the autocomplete is getting an HTML page back instead of serialized data; are you able to inspect the Ajax call at some point (using Glimpse, Fiddler, or Firebug)? — Tieson T., Dec 31 '14 at 08:55

zkanoca · Accepted Answer · 2014-12-31T12:09:06.857

I have

created a web service in the current solution.
moved the method searchInDictionary to the service's .cs file in the App_Code folder.

MyDictionary.cs is the following:

/*
App_Code/MyDictionary.cs
*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data.OleDb;
using System.Configuration;

/// <summary>
/// Summary description for MyDictionary
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class MyDictionary : System.Web.Services.WebService {

    public MyDictionary() {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [ScriptMethod()]
    [WebMethod]
    //removed static modifier
    //display error: Unknown web method searchInDictionary.
    public List<string> searchInDictionary(string prefixText, int count)
    {
        using (OleDbConnection conn = new OleDbConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .ConnectionStrings["myConnectionString"].ConnectionString;
            using (OleDbCommand cmd = new OleDbCommand())
            {
                cmd.CommandText = "SELECT word FROM Dictionary WHERE word LIKE @prefixText";
                cmd.Parameters.AddWithValue("@prefixText", prefixText + "%");
                cmd.Connection = conn;
                conn.Open();
                List<string> result = new List<string>();
                using (OleDbDataReader dr = cmd.ExecuteReader())
                {
                    while (dr.Read())
                    {
                        result.Add(dr["word"].ToString());
                    }
                }
                conn.Close();
                return result;
            }
        }
    }
}

removed the modifier static from the method searchInDictionary(). Because I got error:

Unknown web method searchInDictionary.

added ServicePath attribute to cc1:AutoCompleteExtender element.

new code:

<cc1:AutoCompleteExtender ServiceMethod="searchInDictionary" MinimumPrefixLength="4" 
     CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
     TargetControlID="txtWordSearch" ServicePath="Dictionary.asmx"
     ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">
</cc1:AutoCompleteExtender>

Modified Default.aspx for establishing connection with Dictionar web service.

added

using DictionaryServiceRef;

Now, it is working well. The next problem is how to link the word to display its explanation.

Hey I am still facing same issue – Vijay Kumbhoje Nov 04 '15 at 01:15 — Vijay Kumbhoje, Nov 04 '15 at 01:15
Removing 'static' helped me out. Thanks! – brz Dec 09 '15 at 11:38 — brz, Dec 09 '15 at 11:38

score 0 · Answer 2 · answered Dec 31 '14 at 08:55

0

Change your webmethod from protected to public

public static List<string> searchInDictionary(string prefixText, int count)
{
//your code here
}

answered Dec 31 '14 at 08:55

Mairaj Ahmad

14,434
2
26
40

Thanks but I have already tried it. Forgot to modify the code in the question. – zkanoca Dec 31 '14 at 08:58
do you get in webmetod i mean can you debug it ? – Mairaj Ahmad Dec 31 '14 at 08:59

score 0 · Answer 3 · answered Mar 09 '17 at 12:07

I was facing this same problem after I moved an autocomplete code written in VS 2005 to a

project in VS 2013. It got resolved after doing the following:

1) My ServiceMethod called 'GetSuggestions' was present in the code behind of the same form that contained the autocomplete textbox. I first added a new web service class (AutoCompleteSample.asmx) to the project and moved my service method to that class (AutoCompleteSample.asmx.cs)

2) In the attributes of the AutoCompleteExtender control, I added an attribute ServicePath="AutoCompleteSample.asmx"

3) Uncommented the attribute [System.Web.Script.Services.ScriptService] above the web service class definition so that the entry looked like the below:

[System.Web.Script.Services.ScriptService]
public class AutoCompleteSample : System.Web.Services.WebService
{

4) Make sure the service method used for auto complete has the attribute [System.Web.Script.Services.ScriptMethod] so that it looks like the below:

    [System.Web.Services.WebMethod] 
    [System.Web.Script.Services.ScriptMethod]
    public string[] GetSuggestions(string prefixText, int count)
    {

Making the above changes resolved the problem for me.

Ajax Control Toolkit AutoCompleteExtender displays html source character by character of the current page as autocomplete suggestion list

3 Answers3

Linked