Home/ Questions/Q 6729157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:15:21+00:00

I’ve been trying to put the pieces together on this for a while and

  • 0

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:

  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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0