CODEWITHSUNDEEP
c#jqueryasp.net-mvc-3jquery-ui
Only Bolivian Here
Only Bolivian Here

Reputation: 36733

Using jQuery autocomplete in my MVC3 application

I'm making a registration form for my users and I'd like them to write in their city.

So as they type in a city name, the auto-complete options of the jQuery UI component would load asynchronously.

The example on the page shows how to use a .php file, but how does this fit into a pure HTTP solution?

How do I fetch these options?

I have a simple table accessed using Entity Framework and the repository pattern:

table City
------------------
CityId int primary key,
Name nvarchar(256)

Upvotes: 1

Views: 2913

Answers (1)

Chris Sainty
Chris Sainty

Reputation: 9316

The autocomplete plugin will send a GET request to the path you specify with a ?term=blah querystring parameter.

You need to add an Action to your controller to handle this request, and return an array of matching values as json.

public ActionResult AutoCompleteCity(string term) {
  var db = new myEFDataContext();
  return Json(db.Cities.Where(city => city.Name.StartsWith(term)).Select(city => city.Name), JsonRequestBehavior.AllowGet);
}

Then in your javascript you hook up the autcomplete function like so.

$('#cityTextBoxId').autocomplete({ source: '/Controller/AutoCompleteCity' });

Upvotes: 7

Related Questions