jQuery Autocomplete Component jQuery Autocomplete Component ajax ajax

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

enter image description here