jQuery Autocomplete Component

Question

I'm facing a strange issue with autocomplete.

First issue:

based on the tutorial found here, only the first letter of the found items is showing in the list of autocomplete items

Here is an illustration:

My action at debug time

Dummy data returned, always the same regardless of the search pattern just for testing

In the rendered view, this is what happens:

The Javascript for autocomplete of this scenario is as follows:

$("#Email").autocomplete('@Url.Action("FindEmail", "Administration")',
{
    dataType: 'json',

    parse: function(data) {
        var rows = new Array();

        for (var i = 0; i < data.length; i++) {

            rows[i] = {
                data: data[i].Value,
                value: data[i].Value,
                result: data[i].Value
            };
        }

        return rows;

    },
    width: 300,
    minLength: 3,
    highlight: false,
    multiple: false
        });

Second issue:

I've changed my code to work with a more comfortable Ajax call for me that depends on Model mapping rather than sending a q and limit parameters as in the previous tutorial, and as I've seen in many other tutorials, but the Ajax call isn't firing, not even giving me an error.

My code for this scenario is based on this Stack Overflow Answer

Here is my controller and view code related:

        //[HttpPost]
        [SpecializedContextFilter]
        [Authorize]
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        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"}

            };

            //var retValue = rez.Select(r => new { email = r.Value }).OrderBy(x => x).Take(10);

            //return Json(retValue, JsonRequestBehavior.AllowGet);

            return Json(rez, JsonRequestBehavior.AllowGet);
        }

View 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);
                }
            });
        }
    });

Firefox console view:

I've tried a lot of codes for the second scenario, most of them are Stack Overflow answers, but nothing is happening!

I'm my missing anything ?

Note: jQuery plugins are included, Ajax is already working in the same page, so I'm not sure whats the problem

Thanks for any help.

Answer 1

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