url.action for auto-complete - asp.net-mvc-3

Question

After help from the reply I changed my code to
#Html.TextBoxFor(per => per.Hospital, new { style = "width:220px", #maxlength = "50", data_autocomplete = Url.Action("HospitalList", "Person") })
My jquery is
$(document).ready(function () {
$('input[data_autocomplete]').each(function () {
var url = $(this).data('autocomplete');
$(this).autocomplete({
source: function (request, response) {
$.getJSON(url, {
term: request.term
}, response);
}
});
});
});
And a created a new Action result
public ActionResult HospitalList(string term)
{
List<string> result = new List<string>();
result.Add("Hospital 1");
result.Add("NYUMC");
result.Add("Christ");
result.Add("Bellevue");
result.Add("NewYork-Presbyterian");
result.Add("North Central Bronx Hospital");
return Json(result , JsonRequestBehavior.AllowGet);
}
now where am i going wromg. All I see a a text box , no behavior of auto complete. Should i be including any jquery library for it to work

Answer 1

You haven't shown which autocomplete plugin you are using. If it is the jQuery UI autocomplete you could return the filtered results as JSON from your controller action:
[HttpGet]
public ActionResult PersonSearch(string term)
{
// The term parameter will contain the value entered by the user in the textbox.
// here you could use it and query your database in order to filter the results.
string[] result = new string[]
{
"filtered value 1",
"filtered value 2",
"filtered value 3",
"filtered value 4",
};
return Json(result, JsonRequestBehavior.AllowGet);
}
And finally you would attach the plugin:
$(function() {
$('input[data-autocomplete]').each(function() {
var url = $(this).data('autocomplete');
$(this).autocomplete({
source: function(request, response) {
$.getJSON(url, {
term: request.term
}, response);
}
});
});
});
Notice how the controller action takes the term parameter and should return a list of strings as JSON.