How do I use jquery's UI autocomplete with ASP.NET and an external data source?

Question

I've been trying to put the pieces together on this for a while and am having trouble.

The components:

ASP.NET web application
MS SQL database and tables
C# class with get and set for all table columns
jquery and jquery UI libraries

The scenario:

I have a textbox that I'd like to have autocompleted.
Once the textbox is populated, the user clicks "Add" (Ideally, I need to return the ID of the item but I'm just trying to get it to work)

What I'm not sure about is how the data populated. The jquery documentation says I should have a source URL. The following works fine.

<script>
    $(function () {
        var availableTags = [
        "ActionScript",
        "AppleScript",
                 .....
                 .....
        "Ruby",
        "Scala",
        "Scheme"
    ];
        $("#autoComplete").autocomplete({
            source: availableTags
        });
    });
</script>

But when I replace the array with with an external source it doesn't work:

<script>
$(function () {
    $("#autoComplete").autocomplete({
        source: "http://localhost:61639/ProjectName/AutoCompleteContent.htm"
    });
});
</script>

And this is the HTML for AutoCompleteContent.htm

<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
[
    "ActionScript",
    "AppleScript",
             .....
             .....
    "Ruby",
    "Scala",
    "Scheme"
]
</body>
</html>

Here is my problem:

I'm not sure what the data should look like on the page.
I surely don't know how to display my DB data in a valid format for autocomplete to accept it.

I think I'm going down the right path, but not sure. Could someone spell out the steps?

I'm very appreciative!

wsanville · Accepted Answer · 2011-10-26 19:47:32Z

5

According to the documentation, when using a URL as the source, the response will need to be a JavaScript array:

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

So, your URL is going to have to be something that returns a JavaScript array, not a simple HTML page like you're using. Here's a working example using a ASP.NET handler (I call it 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 and 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>

edited Oct 26, 2011 at 19:47

answered Oct 26, 2011 at 19:19

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barrett Kuethen Over a year ago

Thanks, this is definitely the clarification I need. However, the array is still not accepted by jquery's autocomplete. Would the "{" vs. the "[" have anything to do with it? Can that be changed?

wsanville Over a year ago

I updated my C#, and provided a working example with HTML and Javascript. Try it out.

Barrett Kuethen Over a year ago

Hmm...I'm getting an XML parsing error with your new code. However, I did get the whole array to populate regardless of what I entered in the textbox which is progress in my book.

Collectives™ on Stack Overflow

How do I use jquery's UI autocomplete with ASP.NET and an external data source?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related