一段时间以来，我一直试图将各个部分放在一起，但遇到了麻烦。
组件:
- 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>
这是我的问题:
- 我不确定数据在页面上应该是什么样子。
- 我肯定不知道如何以有效格式显示我的数据库数据以供自动完成接受。
我认为我正走在正确的道路上，但不确定。谁能说出步骤？
非常感谢!
最佳答案
根据documentation ，当使用 URL 作为源时，响应将需要是一个 JavaScript 数组:
When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.
因此，您的 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>
关于c# - 如何将 jquery 的 UI 自动完成与 ASP.NET 和外部数据源一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7907523/