使用明文作为jQuery UI自动完成数据源?

时间:2010-08-30 15:23:58

标签: jquery ajax user-interface autocomplete

我进入的项目有点超出我的技能(因为我是前端开发人员),但无论如何我被告知要解决它。

基本上我要做的是将jQuery UI的Autocomplete与纯文本数据集集成。这是抓取数据的“处理程序”文件:

    <%@ 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;
        }
    }
}

我意识到此页面采用查询字符串“type”,然后返回数据列表。我玩过类似的东西:

$.ajax({
   url: "/ETFSymbollookupDataHandler.ashx",
   data: {
    type: "DELL"
    },

   success: function(ticker){
     alert(ticker);
   }
 });

这确实会返回预期结果......但我不确定如何让它们填入自动完成下拉列表。自动完成小部件有一个“源”参数......我是否需要以某种方式将结果存储在变量中?

更新

我根据自己的喜好调整了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
                    }
                }))
            }
        })
    }
});

现在,我查看了响应并返回了相关结果,但没有显示任何内容?我假设我在“回复”部分中有不正确的内容?

1 个答案:

答案 0 :(得分:0)

您可以将URL作为jQuery UI自动完成的源。无需使用$ .ajax(),存储值等。自动完成功能可以为您完成所有工作。