jQuery Autocomplete Component
Here is a full working example, see screen grab.
These are the steps that I had take to get the second example working.
Script-references/Markup/Js
<script src="~/Scripts/jquery-1.8.2.js"></script><script src="~/Scripts/jquery-ui-1.8.24.min.js"></script><input id="ConferenceId" value="1" /><div class="ui-widget"> <label for="Email">Email: </label> <input id="Email"></div><script type="text/javascript"> $("#Email").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("FindEmail", "Administration")', type: "POST", dataType: "json", data: { email: $("#Email").val(), conferenceId: $("#ConferenceId").val() }, success: function (data) { response($.map(data, function (item) { return { label: item.Value, value: item.Value, id: item.Value }; })); }, select: function (event, ui) { $("input[type=hidden]").val(ui.item.id); } }); } }); </script>
Models
public class RegistrationModel { public string Email { get; set; } public string ConferenceId { get; set; } } public class ValueModel { public string Description { get; set; } public string Value { get; set; } }
Controller Action
I had to add the [HttpPost]
attribute.
[HttpPost]public JsonResult FindEmail(RegistrationModel model) //Notice the use of model instead of string q and string limit{ //Just a dummy implementation var rez = new List<ValueModel> { new ValueModel {Description = "atest1@test.com", Value = "atest1@test.com"}, new ValueModel {Description = "atest2@test.com", Value = "atest2@test.com"}, new ValueModel {Description = "atest3@test.com", Value = "atest3@test.com"}, new ValueModel {Description = "atest4@test.com", Value = "atest4@test.com"} }; return Json(rez, JsonRequestBehavior.AllowGet);}
Screen grab