使用纯文本作为 jQuery UI 自动完成数据源？

Question

我参与的项目有点超出我的技能（因为我是前端开发人员），但我被告知无论如何都要解决它。

基本上我想要做的是将 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;
        }
    }
}

我意识到这个页面采用查询字符串“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
                    }
                }))
            }
        })
    }
});

现在，我查看了响应，它返回了正确的结果，但没有显示任何内容？我想我在“回复”部分有什么不正确的地方？

Answer 1

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