使用纯文本作为jQuery UI自动完成数据源?
问题描述:
我已经进入了一个稍微超出了我的技能的项目(因为我是前端开发人员),但我被告知要解决它。使用纯文本作为jQuery UI自动完成数据源?
基本上我想要做的就是将jQuery UI的自动完成与纯文本数据集合在一起。这里的“处理程序”文件,该文件抓取数据:
<%@ WebHandler Language="C#" Class="ETFSymbollookupDataHandler" %>
using System;
using System.Web;
using System.Collections;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public class ETFSymbollookupDataHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string type = context.Request.QueryString["type"];
string srch = context.Request.QueryString["srch"];
if (type == null)
type = "a";
if (srch == null)
srch = "";
context.Response.ContentType = "text/plain";
string connString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["Ektron.DbConnection"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connString))
{
conn.Open();
SqlCommand cmd = new SqlCommand("uspGetStockAutocomplete", conn);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter prmSymbol = cmd.Parameters.Add("@SearchFor", SqlDbType.VarChar);
prmSymbol.Direction = ParameterDirection.Input;
prmSymbol.Size = 50;
prmSymbol.IsNullable = true;
prmSymbol.Value = (type == null ? (object)DBNull.Value : type);
SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
while (reader.Read())
{
string symbol = reader["symbol"].ToString();
string name = reader["name"].ToString();
context.Response.Write(symbol + ": " + name + "\n");
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
我已经意识到这个页面需要查询字符串“类型”,然后返回数据的列表。我打得周围的东西,如:
$.ajax({
url: "/ETFSymbollookupDataHandler.ashx",
data: {
type: "DELL"
},
success: function(ticker){
alert(ticker);
}
});
这确实返回预期的结果......但我只是不知道如何让他们来填充到自动完成下拉列表。自动填充小部件有一个“源”参数...我需要以某种方式将结果存储在变量中吗?
UPDATE:
我已经得到了稍远一点通过适应的jQueryUI的网站我喜欢的一个例子:
$("#ticker").autocomplete({
source: function(request, response) {
$.ajax({
url: "ETFSymbollookupDataHandler.ashx",
data: {
type: request.term
},
success: function(data) {
response($.map(data.type, function(item) {
return {
label: item.symbol,
value: item.symbol
}
}))
}
})
}
});
现在,我看着响应,它是返回相关结果,但没有显示任何内容?我假设我在“回复”部分有不正确的内容?
答
您可以将URL作为jQuery UI自动完成的源代码。无需玩$ .ajax(),存储值等。自动完成为您完成所有工作。
我在第一次复飞时就试过了。事情是这样的: \t \t //自动完成\t \t \t \t $( “#股票代码”)自动完成({ \t \t \t来源: “/ETFSymbollookupDataHandler.ashx” \t \t})。 但没有数据通过。用Firebug调试这个最简单的方法是什么? – dmackerman 2010-08-30 15:29:29
当使用URL作为源时,AutoComplete预期数据将采用JSON格式。我没有深入你的源代码,但它似乎并没有返回json。 因此,您可以使用$ .ajax从服务器获取数据并将其转换为您将作为源提供给AutoComplete的JS数组,或者修改一下您的服务器端代码,以便它返回JSON格式的数据。我认为第二个选择是最简单的,因为我认为有一个简单的方法可以用.NET来做到这一点。 – PJP 2010-08-30 16:00:49