如何使用jquery的UI自动完成与ASP.. NET和外部数据源

本文关键字：ASP NET 数据源 外部 jquery 何使用 UI | 更新日期: 2023-09-27 18:12:41

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

组件:

  • ASP。. NET web应用程序
  • MS SQL数据库和表
  • c#类，为所有表列提供get和set
  • 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>
这是autocompleteccontent。htm的HTML 
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
[
    "ActionScript",
    "AppleScript",
             .....
             .....
    "Ruby",
    "Scala",
    "Scheme"
]
</body>
</html>

我的问题是:

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

我想我走在正确的道路上，但不确定。谁能把步骤拼出来?

我非常感激!

如何使用jquery的UI自动完成与ASP.. NET和外部数据源

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

当使用String时，Autocomplete插件期望该字符串指向将返回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>
相关文章：