How to fix problems with asp.net mvc 3 and jQuery UI AutoComplete

How to fix problems with asp.net mvc 3 and jQuery UI AutoComplete

The Problem:

You’re tooling along, using the jQuery library to write some great search feature, and you write some great Linq to Sql code.  Being an awesome coder your use the extension method syntax.  Your action result (in the appropriate controller) looks like this

public ActionResult QuickSearch(string term)
{
var lst = context.Contacts.Select(xx => new {FullName= xx.FirstName +” ” + xx.LastName }).Where(xx => xx.label.ToUpper().Contains(term.ToUpper())).ToList();
return Json(lst,JsonRequestBehavior.AllowGet);
}

And for no good reason, you get no results when you try to search for a contact.  All you get is a blank drop down.  Why has jQuery UI failed you?  Why must javascript code always be so finicky?

The Cause:

For good reason Jquery UI Autocomplete uses JSon for remote data.  It looks for a predefined format, and it wants that name to be called “label”.  It is case sensitive.

The Solution:

Just change your ActionResult to look like this

public ActionResult QuickSearch(string term)
{
var lst = context.Contacts.Select(xx => new {label= xx.FirstName +” ” + xx.LastName }).Where(xx => xx.label.ToUpper().Contains(term.ToUpper())).ToList();
return Json(lst,JsonRequestBehavior.AllowGet);
}

and you will be golden.  Please note I changed FullName to label.  Jquery UI Autocomplete is a very nice and useful tool, but it demands to work on it’s own terms.  Beyond that I have never had a problem with this wonderful bit of ajax goodness.

 

Written By Steve French

 

Leave a Reply

Your email address will not be published. Required fields are marked *






Copyright 2011 Digital Tool Factory. All Rights Reserved. Powered by raw technical talent. And in this case, WordPress.