Autocomplete results will not be displayed inside asp.net mvc partial view

Question

I have the following script that is rendered inside my _layout view:-

$(document).ready(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: target.attr("data-autocomplete-source"), 
            minLength: 1, 
            delay: 1000
        });   
    });  
});

and i added the following field to apply autocomplete on it:-

<input  name="term" type="text" data-val="true" 
data-val-required= "Please enter a value."  
data-autocomplete-source= "@Url.Action("AutoComplete", "Staff")"  /> 

now if i render the view as partial view then the script will not fire, and no autocomplete will be performed, so i added the autocomplete inside ajax-success as follow:-

$(document).ready(function () {
    $(document).ajaxSuccess(function () {
        $("input[data-autocomplete-source]").each(function () {
            var target = $(this);
            target.autocomplete({
                source: target.attr("data-autocomplete-source"), 
                minLength: 1, 
                delay: 1000
            });
        });
    });
});

now after adding the AjaxSuccess the action method will be called, and when i check the response on IE F12 developers tools i can see that the browser will receive the json responce but nothing will be displayed inside the field (i mean the autocomplete results will not show on the partial view)?

EDIT

The action method which is responsible for the autocomplete is:-

public async Task<ActionResult> AutoComplete(string term)
      {


          var staff = await unitofwork.StaffRepository.GetAllActiveStaff(term).Select(a => new { label = a.SamAccUserName }).ToListAsync();
          return Json(staff, JsonRequestBehavior.AllowGet);


      }

EDIT2

here is the script which is responsible to show the modal popup:-

$(document).ready(function () {

    $(function () {
        $.ajaxSetup({ cache: false });
        //$("a[data-modal]").on("click", function (e) {
            $(document).on('click', 'a[data-modal]', function (e){
            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true
                }, 'show');
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
            });
            return false;
        });


    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", "disabled");
            $('#progress').show();
            if ($(this).valid()) {

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                       if (result.ISsuccess) {
                            $('#myModal').modal('hide');
                            $('#progress').hide();
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            location.reload();
                            //  alert('www');
                        } else {

                            $('#progress').hide();
                            $('#myModalContent').html(result);
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            bindForm();
                        }
                    }
                });
            }
            else {
                $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                $('#progress').hide();
                return false;
            }

            return false;
        });
    }
});

Answer 1

First, you don't need to wrap you ajaxSuccess fucntion in ready function.

Second, it's better to use POST when you get Json from server.

I tried to seproduce your problem, but have no luck.

Here how it works in my case(IE 11, MVC 4)

script on _Layout:

$(document).ajaxSuccess(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: function (request, response) {
                $.post(target.attr("data-autocomplete-source"), request, response);
            },
            minLength: 1,
            delay: 1000
        });
    });
});

Controller method:

[HttpPost]
public JsonResult AutoComplete()
{
    return Json(new List<string>()
        {
            "1",
            "2",
            "3"
        });
}

Partial View html:

<input name="term" type="text" data-val="true"
       data-val-required="Please enter a value."
       data-autocomplete-source="@Url.Action("AutoComplete", "Stuff")" />

UPDATE:

I find out what your problem is. Jquery autocomplete needs array of objects that have lable and value properties. So if you change your controller code like this and it will work.

public async Task<ActionResult> AutoComplete(string term)
{
    var staff = await unitofwork.StaffRepository.GetAllActiveStaff(term)
    .Select(a => new { label = a.SamAccUserName, value = a.SamAccUserName })
    .ToListAsync();
    return Json(staff, JsonRequestBehavior.AllowGet);
}

Also you can do it on client side with $.map jquery function you can see example here