JQuery autocomplete component

Question

I have a strange problem with autocomplete.

First problem:

based on the textbook found here , only the first letter of the elements found is displayed in the list of autocomplete elements

Here is an illustration:

My actions during debugging

The returned data returned is always the same regardless of the search pattern for testing only

In a visualized view, this happens:

Javascript to autocomplete this script 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 }); 

The second problem:

I changed my code to work with a more convenient Ajax call for me, which depends on model matching, and not on sending aq and limit parameters, as in the previous tutorial, and as I saw in many other tutorials, but the Ajax call does not work does not even give me an error.

My code for this scenario is based on this stack overflow response

Here is my controller and associated view code:

  //[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 = " [e-mail] ", Value = " [e-mail] "}, new ValueModel {Description = " [e-mail] ", Value = " [e-mail] "}, new ValueModel {Description = " [e-mail] ", Value = " [e-mail] "}, new ValueModel {Description = " [e-mail] ", Value = " [e-mail] "} }; //var retValue = rez.Select(r => new { email = r.Value }).OrderBy(x => x).Take(10); //return Json(retValue, JsonRequestBehavior.AllowGet); return Json(rez, JsonRequestBehavior.AllowGet); } 

JavaScript viewer:

  $("#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); } }); } }); 

View the Firefox console:

I tried a lot of codes for the second scenario, most of them are stack overflow answers, but nothing happens!

Am I losing nothing?

Note. JQuery plugins are enabled, Ajax is already working on the same page, so I'm not sure what the problem is.

Thanks for any help.

Answer 1

Here is a complete working example, see screen capture.

These are the steps I took to get the second example.

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 = " [e-mail] ", Value = " [e-mail] "}, new ValueModel {Description = " [e-mail] ", Value = " [e-mail] "}, new ValueModel {Description = " [e-mail] ", Value = " [e-mail] "}, new ValueModel {Description = " [e-mail] ", Value = " [e-mail] "} }; return Json(rez, JsonRequestBehavior.AllowGet); } 

Screen capture