Twitter TypeAhead with Asp .Net - asp.net

Question

Hi All can anyone provide me a good example of how to use Twitter Typeahead (http://twitter.github.io/typeahead.js/) in asp .net with database.
Thanks

Answer 1

In ASP.NET MVC you can create a controller action that returns JSON, like this:
view
#Html.TextBox("playerName")
<script type="text/javascript">
$(function () {
$('#playerName').typeahead({
name: 'players',
valueKey: 'playerName'
prefetch: '#Url.Action("AvaliablePlayers", "Player")',
limit: 10
});
});
</script>
controller and action
public class PlayerController : Controller
{
public JsonResult AvaliablePlayers(int groupId)
{
var group = _groupRepository.GetById(groupId);
return Json(group.Players.Select(p => new { playerId = p.PlayerID, playerName = p.Name), JsonRequestBehavior.AllowGet);
}
}
And in ASP.NET WebForms you can use custom HTTP handler to return data in JSON format, like this:
Default.aspx
<asp:TextBox id="country" CssClass="countryTypeAhead" runat="server"></asp:TextBox>
<script type="text/javascript">
$(function () {
$('.countryTypeAhead').typeahead({
name: 'countries',
prefetch: '<%= Page.ResolveClientUrl("~/Countries.ashx") %>',
limit: 10
});
});
</script>
Add new Generic Handler (.ashx) named Countries to your project. Here is the Code-behind for the handler:
public class Countries : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var cntries = new List<string>() {"Slovenia", "Italy", "Germany", "Austria"};
JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
context.Response.Write(jsSerializer.Serialize(cntries));
}
public bool IsReusable
{
get
{
return false;
}
}
}
This sample uses JavaScriptSerializer which is available in ASP.NET 3.5 and above. If you are using asp.net of lover version than 3.5 you can use JSON.NET to convert typeahead results to JSON format.