Ajax Control Toolkit AutoCompleteExtender renders html source character by current page character as list of autocomplete suggestions
I am trying to implement the autocomplte example at http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx in my own webpage.
The author says:
Here I am explaining how to use the AJAX AutoCompleteExtender Control directly with an ASP.Net web page without using any web services.
I have
- loaded with AjaxControlToolkit
- installed toolikt
- wrote the code to suit my own purpose.
My code looks like this:
<!--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 that contains too many chacarters which are the current source of the HTML page. There is only one source code character on each line. It looks like
<
!
D
O
C
T
Y
P
E
...
before
<
/
h
t
m
l
>
I am trying to autocomplete the word "Cancer". I type "canc" and lists the HTML source.
I viewed the page using FireBug In the XHR section of the Network tab the POST action is fired and the values are below:
Json
count 10
prefixText "canc"
Source
{"prefixText":"canc","count":10}
source to share
I have
- created a web service in the current solution.
- moved the searchInDictionary method to a .cs file in the App_Code directory .
MyDictionary.cs:
/*
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 static modifier from the searchInDictionary () method . Because I got the error:
Unknown web method searchInDictionary.
- added attribute
ServicePath
to elementcc1:AutoCompleteExtender
.
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 to establish a connection to the Dictionar web service.
added
using DictionaryServiceRef;
It works well now. The next problem is how to link this word to display its explanation.
source to share
I faced this same issue after I moved my autocomplete code written in VS 2005 to
in VS 2013. It got resolved after doing the following:
1) My ServiceMethod called GetSuggestions was present in the code behind the same form that contained the autocomplete textbox. First, I 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 the attribute ServicePath = "AutoCompleteSample.asmx"
3) Compiled the [System.Web.Script.Services.ScriptService] attribute above the web service class definition so that the entry looks like this:
[System.Web.Script.Services.ScriptService]
public class AutoCompleteSample : System.Web.Services.WebService
{
4) Make sure that the service method used for auto completion has the [System.Web.Script.Services.ScriptMethod] attribute so that it looks like this:
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetSuggestions(string prefixText, int count)
{
Doing the above changes solved the problem for me.
source to share