AJAX Autocompleter with Script.aculo.us and an ASP.NET web service

Yesterday a Microsoft MVP had asked me to provide a better example of using the auto-completer that I had made with an ASP.NET project. In response to this, I'm uploading a project that has a fully-functioning example. The use of a web service instead of the AJAX ASP.NET toolkit allows you to embed your AJAXified controls inside of user controls rather than having them bound to a particular page. Furthermore, you can easily customize the script if you so choose.

Download Ajax Auto Completer Sample ASP.NET project

For example, take a look at line 301 of autocompleter.js:

 
  choicesToHtml : function(choices)
  {
    var output = "
<ul>";
        for (i=0; i< choices.length; i++)
            output = output + "
<li>" + choices[i] + "</li>
 
";
 
    return output + "</ul>
 
";
  }
 

Because you're actually pulling data from the web service, it would be easy to extend this example to provide a fully nested JSON object with images etc... as part of the auto-completer. I'll provide such an example with the Zend Framework and it's web service components at a later date, however being able to serialize a data structure like the one below would be perfect for an auto-completion web service.

 
 {
     "headerText": "SearchBox Header Text",
     "searchCollection": [
    "searchResult" : {
        "imageSource" : "product.gif",
        "text" : "my product text",
        "url" : "http://linkToMyProduct/"
    },
    "searchResult" : {
        "imageSource" : "product.gif",
        "text" : "my product text",
        "url" : "http://linkToMyProduct/"
    },
    "searchResult" : {
        "imageSource" : "product.gif",
        "text" : "my product text",
        "url" : "http://linkToMyProduct/"
    },
    "searchResult" : {
        "imageSource" : "product.gif",
        "text" : "my product text",
        "url" : "http://linkToMyProduct/"
    },
     ],
     "headerText": "SearchBox Footer Text"
 }
 

While I have excellent unix-based hosting, I unfortunately don't have an external IIS server that I can publish this out.