Fatal编程技术网
  • csharp/
  • C# 如何使用jquery'；是否使用ASP.NET和外部数据源自动完成用户界面？

C# 如何使用jquery'；是否使用ASP.NET和外部数据源自动完成用户界面？

c# asp.net jquery-ui

C# 如何使用jquery'；是否使用ASP.NET和外部数据源自动完成用户界面？,c#,asp.net,jquery-ui,jquery-ui-autocomplete,C#,Asp.net,Jquery Ui,Jquery Ui Autocomplete,我一直在试图把这件事拼凑在一起有一段时间了，我遇到了麻烦 组成部分： ASP.NET web应用程序 MS SQL数据库和表 C#类，为所有表列提供get和set jquery和jquery UI库 情景： 我有一个文本框，我想自动完成 填充文本框后，用户单击“添加”（理想情况下，我需要返回项目的ID，但我只是想让它工作） 我不确定的是数据是如何填充的。jquery文档说我应该有一个源URL。下面的操作很好 <script> $(function () {

我一直在试图把这件事拼凑在一起有一段时间了，我遇到了麻烦

组成部分：

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


$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
.....
.....
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#自动完成”）。自动完成({
资料来源：availableTags
});
});

但当我用外部源替换阵列时，它不起作用：

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


$（函数（）{
$（“#自动完成”）。自动完成({
来源：“http://localhost:61639/ProjectName/AutoCompleteContent.htm"
});
});
这是AutoCompleteContent.htm的HTML

<!DOCTYPE>

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


[
“动作脚本”，
“AppleScript”，
.....
.....
“红宝石”，
“斯卡拉”，
“方案”
]
我的问题是：

  • 我不确定页面上的数据应该是什么样子
  • 我当然不知道如何以有效的格式显示我的DB数据，以便autocomplete接受它
    • 我想我走的是正确的道路，但不确定。有人能把步骤说清楚吗

    我非常感激

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

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

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

    
使用制度；
使用System.Web；
使用System.Web.Script.Serialization；
使用System.Linq；
公共类自动完成：IHttpHandler
{
公共void ProcessRequest（HttpContext上下文）
{
context.Response.ContentType=“应用程序/javascript”；
//从某处加载您的项目。。。
字符串[]项=
{
“动作脚本”，
“AppleScript”，
“红宝石”，
“斯卡拉”，
“方案”
};
//jQuery将把您在搜索框中键入的内容传递到“term”查询字符串中
string term=context.Request.QueryString[“term”]；
如果（！String.IsNullOrEmpty（term））
{
//找到匹配的吗
var result=items.Where（i=>i.StartsWith（term，StringComparison.CurrentCultureIgnoreCase））.ToArray（）；
//将字符串数组转换为Javascript
Write（新的JavaScriptSerializer（）.Serialize（结果））；
}
}
公共布尔可重用
{
得到
{
返回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>

    
自动完成演示
$（文档）.ready（函数（）
{
$（“#标记”）.autocomplete({
来源：“/autocomplete.ashx”
});
});
    谢谢，这绝对是我需要的澄清。但是，jquery的autocomplete仍然不接受该数组。“{”和“[”会有什么关系吗？可以改变吗？我更新了我的C#，并提供了一个HTML和Javascript的工作示例。试试看。嗯……我在你的新代码中遇到了一个XML解析错误。但是，不管我在文本框中输入了什么，我都会填充整个数组，这在我的书中是有进展的。 
    <!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>