ASP.NET MVC AutoComplete Textbox with jQuery

At the time of this post I am using Visual Studio 2010 RC.

UPDATE: Please see an updated post with a complete walkthrough that demonstrates the new jQuery UI Autocomplete released with jQuery UI 1.8+.

I am writing an interface to help select communities that are in range of one of our broadcast towers.  The project is written in c# in Visual Studio 2010 and targeting the ASP.NET MVC framework.  I am using jQuery as an aid to this task.

Users have hundreds of communities to choose from. They are pre-loaded into the database, as are the towers.  They have a list of towers in a spreadsheet and each tower has a list of communities that are in range.

A checkbox or multiselect component would be too cumbersome and most of us could type faster, anyway.  The desired interface is an AutoComplete textbox that allows a user to enter a few keystrokes and quickly add communities to a tower.

Starting Point?

There are many examples out there that mash together various controls or frameworks, so this certainly isn’t clear. But the seemingly most-referenced project is Jorn Zaefferer’s jQuery Autocomplete plugin. 

It hasn’t been touched in a couple of years and the documentation is a little rough, but the blog-o-sphere comes to the rescue here: Joe Cartano’s MVC Diaries.

Joe wrote an intro to this plugin using ASP.NET MVC, which is almost exactly what I needed.  Unfortunately, his post was from over a year ago and didn’t quite work.  Luckily, there is very little to do to bring it up to speed.

The Refresh

If you want to skip the verbiage, download the VS2010 project file here.  It is an empty MVC project with only the parts required to get it running.

Here’s a summary of the changes that I made to Joe’s walk-through:

• Updated jQuery to 1.3.2
• Changed the delay to 400ms
• Changed the controller action to a JsonResult
• Added search capability to the action
• Modified the call to be a POST
  • The current release of MVC, by default, blocks GETs for Json results. Your choices are to switch to POST or use JsonRequestBehavior.AllowGet, otherwise you’ll get the following error:

This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

• Because of switching to POST, I had to configure the AJAX calls for jQuery: $.ajaxSetup({ type: "POST" });
• Added an ID to the row template so that I could retrieve it when selected (to support keys for database scenarios, like mine)
• Added a DIV on the page to display the selected ID in the result() method of the autocomplete.
• Removed the multi-tag support (don’t need it for my application)
• Implemented a fake repository so it would be trivial to move to a data scenario

And there you have it. Again, you can download the VS2010 project file here if you would like to walk through this.

References:

• jQuery Autocomplete
• MVC Diaries