Using plaintext as a jQuery UI Autcomplete data source?

Question

I've come onto a project that is a little bit out of my skillset (as I'm a front-end dev), but I was told to tackle it anyway.

Basically what I'm trying to do is integrate jQuery UI's Autocomplete with a dataset that is plain text. Here's the "handler" file which grabs the data:

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

I've realized that this page takes the querystring "type" and then returns a listing of data. I've played around with something like:

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

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

And that does return the expected results...but I'm just not sure how to get them to populate into the Autocomplete dropdown. The autocomplete widget has a "source" parameter...do I need to somehow store the result in a variable?

UPDATE:

I've gotten a little farther by adapting one of the examples of the jQueryUI website to my liking:

$("#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
                    }
                }))
            }
        })
    }
});

Now, I looked at the response and it is returning the corret results, but nothing is being displayed? I assume I have something incorrect in the "response" section?

Answer 1

You can just give the URL as a source to jQuery UI Autocomplete. No need to play with $.ajax(), store the values, etc. Autocomplete does all the work for you.