ASP.NET MVC 4 in Action - Manning Publications

Creating an autocomplete text box
129
Figure 7.10 Google Suggest filters options as you type
7.4 Creating an autocomplete text box
So far in this chapter, you’ve seen how you can leverage Ajax and JSON to make
requests back to the server to retrieve data. In addition to manually issuing these Ajax
requests, you can also make use of client-side control libraries and jQuery plugins that
abstract away much of the boilerplate code for dealing with Ajax requests.
jQuery UI (http://jqueryui.com) is one such set of plugins. It’s built on top of the
jQuery core to provide several client-side user interface widgets, including an accordion,
an autocomplete text box, themeable buttons, a datepicker, a modal dialog, a
progress bar, slider, and tabs. In this example, we’ll look at how we can make use of
the Autocomplete plugin to present the user with a searchable list of cities, something
like Google’s suggest functionality, shown in figure 7.10.
7.4.1 Building the CitiesController
To begin, we’ll create a CitiesController that will render a page containing our text
box, as follows.
Listing 7.22 The CitiesController
public class CitiesController : Controller
{
private readonly CityRepository _repository;
public CitiesController()