How can i add Autocomplete textbox changed event in MVC3 - asp.net-mvc-3

Question

How can I add an MVC3 autocomplete textbox changed event? Below is my code.
My view code
<div style="float: left">
States Filter :
</div>
<div style="float: left; padding-left: 10px">
#Html.TextBox("Statestxt")
</div>
<div style="padding-left: 10px; float: left">
<input type="image" value="submit" src="../../Images/FilterBrowse.gif"
alt="submit Button" />
</div>
My controller:
public ActionResult AutocompleteAsync(string term)
{
var suggestions = from s in Adm.states
select s.state_name;
var namelist = suggestions.Where(n => n.ToLower().StartsWith(term.ToLower()));
return Json(namelist, JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult States(state stateModel, string _stateName,
FormCollection formvalues)
{
AdmDataContext Adm = new AdmDataContext;
if (Request.Form["Statestxt"] == null)
{
ViewBag.Error = "Enter State Name.";
ViewData["name"] = false;
return View();
}
else
{
_stateName = Request.Form["Statestxt"].ToString();
var record = (from state in Adm.states
where state.state_name == _stateName
select state).Count();
if (record == 0)
{
ViewBag.Error = "Enter Valid State Name.";
return View();
}
var _Stateid = from state in Adm.states
where state.state_name == _stateName
select state;
int StateId = (int)_Stateid.First().state_id;
var state1 = am.FindUpcomingStates2(StateId).ToList();
if (state1 != null)
{
ViewData["name"] = true;
return View("States", state1);
}
}
}
I want to change the data after entering Statestext. Where can I write the code for the Textbox changed event?
Thanks.

Answer 1

I take it you want to call a Javascript function when the user changes the text. There's an overload for the Html.TextBox helper that you can use for this:
#Html.TextBox("Statestxt", "", new { onkeyup = "fnAjaxAutocomplete(this)" })
Then your handler Javascript method would look like this:
function fnAjaxAutocomplete(element)
{
var ajaxUrl = '#Url.Action("AutocompleteAsync")' + '?text=' + element.value;
$.get(ajaxUrl(function(suggestionsJson) {
// handle JSON result here
});
}