This blog has, IMO, some great resources. Unfortunately, some of those resources are becoming less relevant. I'm still blogging, learning tech and helping others...please find me at my new home on

Friday, March 19, 2010

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+.

image 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.



  1. .net is one of the most user friendly software development platforms. development gives the way to develop complex web applications and web pages. Even most of the Business Intelligence software are being made on .net platforms with integrating as an essential functional part.

  2. Thanks for the helpful article and sample code. Is $.ajaxSetup a jQuery method or a Microsoft method?

  3. You're welcome, make sure you check out the updated version, though.

    To answer your question, $.ajaxSetup is jQuery and it modifies the default behaviour (in the scope of the page) of jQuery AJAX operations.

    The updated version of this article uses the new jQuery UI plugin (