JQuery AutoComplete From XML (Dynamic Results)

Question

Perhaps I'm not understanding this concept (I'm an AJAX/javascript/Web newbie). I'm using the JQuery autocomplete feature and if I specify a small, limited items flat file (suggestions.xml) the function works fine, but when I use an actual production data file (3 MB) of suggestions the script doesn't work at all.

So I created a web service that generates XML based on the characters in the textbox but it appears this JQuery doesn't run on each keypress, rather only when the page first loads. Obviously, for this function to be of any use it needs to fetch results dynamically as the user types into the input field.

$(document).ready(function () {
var myArr = [];

$.ajax({
    type: "GET",
    // this line always sends the default text; not what the user is typing
    url: "Suggestions.aspx?searchString=" + $("input#txtSearch").val(),
    dataType: "xml",
    success: parseXml,
    complete: setupAC,
    failure: function (data) {
        alert("XML File could not be found");
    }
});

function parseXml(xml) {
    //find every query value
    $(xml).find("result").each(function () {
        myArr.push({ url: $(this).attr("url"), label: $(this).attr("name") + ' (' + $(this).attr("type").toLowerCase() + ')' });
    });
}

function setupAC() {
    $("input#txtSearch").autocomplete({
        source: myArr,
        minLength: 3,
        select: function (event, ui) {
            $("input#txtSearch").val(ui.item.label);
            window.location.href = ui.item.url;
            //alert(ui.item.url + " - " + ui.item.label);
        }
    });
}

});

On the server I expected to see a few requests corresponding to the characters the user is typing into the search box but instead I get a single message:

2013-10-18 22:02:04,588 [11] DEBUG baileysoft.mp3cms.Site - QueryString params: [searchString]:'Search'

My flat file of suggestions appears to be way to large for JQuery to handle and my web service script is never called, except when the page is first loaded.

How do I generate suggestions dynamically as the user is typing in the search box if I can't run back to the database (via my web service) to fetch suggestions as the user is typing?

Answer 1

Ok, I got it all worked out.

On the ASPNET side; I created a form to receive and respond to the AJAX:

    Response.ContentType = "application/json";
    var term = Request.Form["term"];

    var suggestions = GetSuggestions(term); // Database results
    if (suggestions.Count < 1)
        return;

    var serializer = new JavaScriptSerializer();
    Response.Write(serializer.Serialize(suggestions);

On the AJAX side I modified the js function:

    $("input#txtSearch").autocomplete({
       minLength: 3,
       source: function (request, response) {
         $.ajax({
           url: "Suggestions.aspx",
           data: { term: $("input#txtSearch").val() },
           dataType: "json",
           type: "POST",
           success: function (data) {
            response($.map(data, function (obj) {
                return {
                    label: obj.Name,
                    value: obj.Url
                };
            }));
           }
          });
       },
       select: function (event, ui) {
         $("input#txtSearch").val(ui.item.label);
         window.location.href = ui.item.value;
       }
    });

Everything is working as expected now.

Hope this helps someone else who might get stuck trying to figure out JQuery stuff for ASPNET.