Skip to content

Instantly share code, notes, and snippets.

@carlhoerberg
Created May 2, 2011 06:31
Show Gist options
  • Save carlhoerberg/951237 to your computer and use it in GitHub Desktop.
Save carlhoerberg/951237 to your computer and use it in GitHub Desktop.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="completeMe" id="completeMe" />
<script type="text/javascript">
$(function() {
$("#completeMe").autocomplete({
source: '/Autocomplete/Users',
minLength: 1,
select: function(event, ui) {
// Do something with "ui.item.Id" or "ui.item.Name" or any of the other properties you selected to return from the action
}
});
});
</script>
</body>
</html>
public class AutocompleteController : Controller
{
private readonly IRepository db;
public AutocompleteController(IRepository db)
{
this.db = db;
}
public JsonResult Users(string term)
{
var data = db.Query<User>()
.Where(r => r.Name.StartsWith(term))
.Select(r => new { r.Id, value = r.Name })
.Take(10)
.ToArray();
return Json(data, JsonRequestBehavior.AllowGet);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment