Ajax Control Toolkit AutoCompleteExtender 将当前页面的 html 源代码逐个字符显示为自动完成建议列表

Question

我正在尝试在我自己的网页上实现 http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx 上的自动完成示例。

作者说；

这里我解释一下，如何在不使用任何网络服务的情况下，直接将 AJAX AutoCompleteExtender 控件与 ASP.Net 网页一起使用。

我有

1. 下载AjaxControlToolkit
2. 安装了工具
3. 按照自己的目的写代码。

我的代码如下：

<!--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;
        }
    }

在文本框中输入 4 个字符后，我得到一个包含太多字符的列表，这些字符是当前页面的 html 源。每行只有一个源代码字符。就像

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

直到

<
/
h
t
m
l
>

我正在尝试自动完成“癌症”一词。我输入“canc”，它会列出 HTML 源代码。

我已经使用 FireBug 检查了该页面 在 Net 选项卡的 XHR 部分中，会触发一个 POST 操作，其值如下：

JSON

count   10
prefixText  "canc"

来源

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

Answer 1

我有

1. 在当前解决方案中创建了一个 Web 服务。
2. 将方法 searchInDictionary 移至 App_Code 文件夹中服务的 .cs 文件。

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;
            }
        }
    }
}

1. 从 searchInDictionary() 方法中删除了修饰符 static。因为我得到了错误：

未知的网络方法 searchInDictionary。

4. 将ServicePath 属性添加到cc1:AutoCompleteExtender 元素。

新代码：

<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>

5. 修改 Default.aspx 以建立与 Dictionar Web 服务的连接。

添加

using DictionaryServiceRef;

现在，它运行良好。下一个问题是如何链接单词以显示其解释。

Answer 2

将您的网络方法从 protected 更改为 public

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

Answer 3

在将用 VS 2005 编写的自动完成代码移动到

后，我遇到了同样的问题

VS 2013中的项目。执行以下操作后得到解决：

1) 我的名为“GetSuggestions”的 ServiceMethod 出现在包含自动完成文本框的同一表单的代码中。我首先在项目中添加了一个新的 Web 服务类 (AutoCompleteSample.asmx)，并将我的服务方法移动到该类 (AutoCompleteSample.asmx.cs)

2) 在AutoCompleteExtender控件的属性中，我添加了一个属性 ServicePath="AutoCompleteSample.asmx"

3) 取消注释 Web 服务类定义上方的属性 [System.Web.Script.Services.ScriptService]，使条目如下所示：

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

4) 确保用于自动完成的服务方法具有 [System.Web.Script.Services.ScriptMethod] 属性，使其如下所示：

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

进行上述更改为我解决了问题。