You know the autocomplete dropdown. It has become ubiquitous, and customers now expect them in their web apps. "Can't you just set autocomplete=true or something?" It's not quite that easy with ASP.NET MVC, but it's pretty simple.
We want to set up a text box on a web page that uses jQuery to call back to a controller action as the user types. The action method will return a JSON array of values that match what the user has typed so far. Each time they type and pause for a second, the screen should show the new matching records.
The view
First, we'll work on the view. Set a reference to jQuery and to jQuery UI. These are included with new MVC 3 projects (look in the Scripts folder), or you can find a CDN and reference them there. I've got this in my view's head section:
<head>
<title>Autocomplete Test </title>
<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js")%>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
</head>
Then you need a text box to tie all this too. The search results will be shown under this text box to give the appearance of a dropdown. This simple form should do:
<form action="/Search/ProcessTheForm" method="post">
<input id="searchTerm" name="searchTerm" type="text" />
<input type="submit" value="Go" />
</form>
Next, you'll need to use the autocomplete function in jQuery UI like this:
<script type="text/javascript">
$(function () {
$("#searchTerm").autocomplete({
source: "/Search/AutocompleteSuggestions",
minLength: 3,
select: function (event, ui) {
if (ui.item) {
$("#searchTerm").val(ui.item.value);
$("form").submit();
}
}
});
});
</script>
Here we've got a jQuery selector binding the autocomplete function to the searchTerm input box("#searchTerm"). We then set the URL for the source for the autocomplete suggestions, which in this case, will be our controller (Search) and action method (AutocompleteSuggestions). Then we set the number of characters the user has to type before we make the first call. It's set to three here to prevent pulling back meaningless matches from searching too soon.
Finally, we set up the autocomplete function's select event to set the selected value from the dropdown list as the value in the searchTerm input box and submit the form to the Search controller and the ProcessTheForm action method.
Here's the entire view for reference:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Test</title>
<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js")%>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
</head>
<body>
<form action="/Search/ProcessTheForm" method="post">
<input id="searchTerm" name="searchTerm" type="text" />
<input type="submit" value="Go" />
</form>
<script type="text/javascript">
$(function () {
$("#searchTerm").autocomplete({
source: "/Search/AutocompleteSuggestions",
minLength: 3,
select: function (event, ui) {
if (ui.item) {
$("#searchTerm").val(ui.item.value);
$("form").submit();
}
}
});
});
</script>
</body>
</html>
The controller
Now you need to write something that will return the records that match what the user has entered so far. This might be a database call with a LIKE searchTerm + "%" (watch out for SQL injection, though) or SOUNDEX or a web service call. Be sure you limit your returned search results to maybe the top 10 matches so you don't bog things down with too much data moving over the wire.
Next, set up a controller action to invoke this back-end call and JSON up the returned list. We've already names the controller (Search) and action (AutocompleteSuggestions) in our view. Something like this should work, where _searchRepository is my repository call that finds matching strings, which are then converted to JSON:
public JsonResult AutocompleteSuggestions(string term)
{
var suggestions = _searchRepository.GetAutoCompleteSearchSuggestion(term);
return Json(suggestions, JsonRequestBehavior.AllowGet);
}
Don't forget the JsonRequestBehavior.AllowGet parameter in the Json call. You won't get anything back from the action method if you leave it off.
Also, the name of the parameter passed into the action method is important. The jQuery UI autocomplete method will call your source URL with a query string like "?term=foo". If you set the parameter name to a string named "term", the MVC model binder will grab the value from the query string for you.
The jQuery UI Autocomplete function has several other options and events you can use in your app, and the demos are worth checking out too.