jQuery autocomplete for json data

Question

I am returning array of strings from controller to ajax call. trying to set to textbox those values. in textbox it is not populating. but I can see data in success method.

  [HttpGet]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public JsonResult GetWorkNamesAutoPoplate(string companyName)
    {
        ...
        var newKeys = companyNameslst.Select(x => new string[] { x }).ToArray();

        var json = JsonConvert.SerializeObject(newKeys);
        return Json(json, JsonRequestBehavior.AllowGet);
    }

JS

 $(document).on('change', '[name="FindCompanyName"]', function () {
     $('[name="FindCompanyName"]').autocomplete({        
        source: function (request, response) {           
            $.ajax({
                url: "GetWorkNamesAutoPoplate",
                type: "GET",
                dataType: "json",
                data: { companyName: $('[name="FindCompanyName"]').val() },
                success: function (data) {
                    alert(JSON.stringify(data));
                    response($.map(data, function(item) {
                        console.log(item);
                        return {
                            value: item
                        }
                    }));    
                }
            });
        },
        messages: {
            noResults: "", results: ""
        }    
    });
 });

alert(JSON.stringify(data)); display like this. enter image description here

How to populate this data in textbox

Have a look at this .http://stackoverflow.com/questions/27578169/jquery-ui-autocomplete-not-working-with-asp-net/27578198#27578198 — Mairaj Ahmad, May 27 '15 at 04:50

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

This may resolve your issue :

success: function (data) {
                  alert(JSON.stringify(data));
                  if (data != null) {
                    response(data.d);
                   }
                }

Also this link might help you to get some information :How to use source: function()... and AJAX in JQuery UI autocomplete

edited May 23 '17 at 12:30

Community

1
1

answered May 27 '15 at 05:31

Nivs

376
2
15

shakib · Accepted Answer · 2015-05-27T06:34:22.140

The return type of your json is an array of arrays, i think you should return it as an array

var newKeys = companyNameslst.ToArray();

also, your data are serialized twice,

one from line,

var json = JsonConvert.SerializeObject(newKeys);

and second time from JsonResult action filter

return Json(json, JsonRequestBehavior.AllowGet);

sending json data like,

return Json(newKeys, JsonRequestBehavior.AllowGet);

instead of

var json = JsonConvert.SerializeObject(newKeys);
return Json(json, JsonRequestBehavior.AllowGet);

should work.

hope this helps.

jQuery autocomplete for json data

2 Answers2