code blog foo - tag line bar

There is an excellent post on how to make an auto complete text box from scratch.  I have taken these concepts along with a lot of help from this jQuery plugin and this jQuery plugin to create an auto complete plug in that is ready to drop into an ASP.NET MVC 1.0 web application (see notes below for using this in MVC 2).  The css for this plugin comes directly from jQueryUI....so if you have a custom theme file from there....this auto complete text box plugin should be skinned well enough...I have tested compatibility with IE7+, Firefox 2.0+, Chrome, and Safari 3.0+...no...I have no idea if it works in IE6....IE6 is evil...

About the Source

This was written using the MVC 1.0 project template (I will update this to MVC 2.0 shortly). If you have difficulty opening the project in Visual Studio, chances are you have ASP.NET MVC 2.0 installed. Refer to this link for instructions on how to change over the project: Convert an MVC 1.0 Project to MVC 2.0.

Also in MVC 2, returning JSON via an HTTP/GET Controller action will throw an exception if you do:

public ActionResult Search(string searchString)
{
    //populate search results
    List<KeyValuePair<string,string>> searchResults = ...;     

    //this will throw an exception in ASP.NET MVC 2
    return Json(searchResults);  
}

Again, the code above will throw an exception and must be changed to the following if you plan on upgrading the source code for this post to ASP.NET MVC 2:

public ActionResult Search(string searchString)
{
    //populate search results 
    List<KeyValuePair<string,string>> searchResults = ...;     

    //this will fix the exception
    return Json(searchResults, JsonRequestBehavior.AllowGet);
}

For a fully integrated example into an asp mvc application:
download the full solution (.zip).

Source code for auto complete plug-in:
jquery-rima-autocomplete.js.

---

Written: 3/25/2010 Comments