Question

我一直试图把这些碎片放在一起这一段时间，但我遇到了麻烦。

组件：

ASP.NET Web应用程序
MS SQL数据库和表格
带有所有表列的get和set的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>

这是我的问题：

我不确定网页上的数据应该是什么样的。
我当然不知道如何以自动填充的有效格式显示我的数据库数据以接受它。

我想我走的是正确的道路，但不确定。有人可以拼出这些步骤吗？

我非常感激！

Answer 1

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

使用String时，Autocomplete插件希望该字符串指向将返回JSON数据的URL资源。它可以位于同一主机上，也可以位于不同的主机上（必须提供JSONP）。请求参数“term”将添加到该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>

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

1 个答案: