Bar*_*hen 3 c# asp.net jquery-ui jquery-ui-autocomplete
我一直试图把这些碎片放在一起这一段时间,我遇到了麻烦.
组件:
场景:
我不确定的是数据是如何填充的.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>
这是我的问题:
我想我走的是正确的道路,但不确定.有人可以拼出这些步骤吗？
我非常感激!
根据文档,当使用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>
| 归档时间： |
|
| 查看次数： |
2567 次 |
| 最近记录： |