如何在 ASP.NET 和外部数据源中使用 jquery 的 UI 自动完成功能？答案

【问题标题】：How do I use jquery's UI autocomplete with ASP.NET and an external data source?如何在 ASP.NET 和外部数据源中使用 jquery 的 UI 自动完成功能？
【发布时间】：2011-10-26 18:58:24
【问题描述】：

一段时间以来，我一直在尝试将各个部分放在一起，但遇到了麻烦。

组件：

ASP.NET 网络应用程序
MS SQL 数据库和表
C# 类，对所有表列进行获取和设置
jquery 和 jquery UI 库

场景：

我有一个想要自动完成的文本框。
填充文本框后，用户单击“添加”（理想情况下，我需要返回项目的 ID，但我只是想让它工作）

我不确定数据是如何填充的。 jquery 文档说我应该有一个源 URL。以下工作正常。

<script>
    $(function () {
        var availableTags = [
        "ActionScript",
        "AppleScript",
                 .....
                 .....
        "Ruby",
        "Scala",
        "Scheme"
    ];
        $("#autoComplete").autocomplete({
            source: availableTags
        });
    });
</script>

但是当我用外部源替换数组时它不起作用：

<script>
$(function () {
    $("#autoComplete").autocomplete({
        source: "http://localhost:61639/ProjectName/AutoCompleteContent.htm"
    });
});
</script>

这是 AutoCompleteContent.htm 的 HTML

<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
[
    "ActionScript",
    "AppleScript",
             .....
             .....
    "Ruby",
    "Scala",
    "Scheme"
]
</body>
</html>

这是我的问题：

我不确定页面上的数据应该是什么样子。
我当然不知道如何以有效格式显示我的数据库数据，以便自动完成以接受它。

我认为我正在走正确的道路，但不确定。有人能说出步骤吗？

非常感谢！

【问题讨论】：

标签： c# asp.net jquery-ui jquery-ui-autocomplete

【解决方案1】：

根据documentation，当使用URL作为源时，响应需要是一个JavaScript数组：

当使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上，也可以在不同的主机上（必须提供 JSONP）。请求参数“term”被添加到该 URL。数据本身可以采用与上述本地数据相同的格式。

因此，您的 URL 必须是返回 JavaScript 数组的东西，而不是像您正在使用的简单 HTML 页面。这是一个使用 ASP.NET 处理程序的工作示例（我称之为autocomplete.ashx）：

<%@ WebHandler Language="C#" Class="autocomplete" %>

using System;
using System.Web;
using System.Web.Script.Serialization;
using System.Linq;

public class autocomplete : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/javascript";

        //load your items from somewhere...
        string[] items =
        {
            "ActionScript",
            "AppleScript",
            "Ruby",
            "Scala",
            "Scheme"
        };

        //jQuery will pass in what you've typed in the search box in the "term" query string
        string term = context.Request.QueryString["term"];

        if (!String.IsNullOrEmpty(term))
        {
            //find any matches
            var result = items.Where(i => i.StartsWith(term, StringComparison.CurrentCultureIgnoreCase)).ToArray();
            //convert the string array to Javascript
            context.Response.Write(new JavaScriptSerializer().Serialize(result));
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

HTML 和 JavaScript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Auto complete demo</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#tags").autocomplete({
                source: '/autocomplete.ashx'
            });
        });
    </script>
</head>
<body>
    <input type="text" id="tags" />
</body>
</html>

【讨论】：

谢谢，这绝对是我需要的澄清。但是，jquery 的自动完成仍然不接受该数组。 “{”与“[”有什么关系吗？可以改吗？
我更新了我的 C#，并提供了一个使用 HTML 和 Javascript 的工作示例。试试看。
嗯...我的新代码出现 XML 解析错误。但是，无论我在文本框中输入了什么，我确实得到了整个数组来填充，这在我的书中是进步的。