Autocomplete with jqueryui
<form method="get" action=@Url.Action("Index") data-otf-ajax="true" data-otf-target="#restaurantList" >
<input type="text" name="search" value="" data-otf-autocomplete=@Url.Action("Autocomplete") />
<input type="submit" value="Search by name" />
</form>
public ActionResult Autocomplete(string term)
{
var model = db.Restaurants
.Where(r => r.Name.StartsWith(term))
.Take(10)
.Select(r => new { label = r.Name });
return Json(model, JsonRequestBehavior.AllowGet);
}
$(function () {
var createAutocomplete = function () {
$input = $(this);
var options = {
source: $input.attr("data-otf-autocomplete")
}
$input.autocomplete(options);
}
$("input[data-otf-autocomplete]").each(createAutocomplete);
})