CODEWITHSUNDEEP
c#asp.netjquery-uijquery-ui-autocomplete
Barrett Kuethen
Barrett Kuethen

Reputation: 1914

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

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

The components:

The scenario:

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:

  1. I'm not sure what the data should look like on the page.
  2. 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!

Upvotes: 3

Views: 2731

Answers (1)

wsanville
wsanville

Reputation: 37516

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>

Upvotes: 5

Related Questions