autocompletion in jquery not working

Question

I am using json result to populate the textbox and I can see the values are returned to Razor view using alert. But I am unable to bind them to textbox.

in my layout.cshtml i am loading the jquery files. ![This is in the header section of my layout page][1]

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/jquery-ui")

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/Site")   

This is my index file,

$("#usersearch").change(function () {
        //$('#SearchVendorId').val(0);
        if ($('#usersearch').val() != "") {
            $('#usersearch').addClass("errorTextBox");
            $('#usersearch').removeClass("successTextBox");
        }
        else {
            $('#usersearch').removeClass("successTextBox");
            $('#usersearch').removeClass("errorTextBox");
        }
    });


    $('#usersearch').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetUsers")',
                data: { term: request.term },
                dataType: 'json',
                type: 'GET',
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                   response($.map(data, function (item) {
                       alert(item.value);
                        return {
                            label: item.value,
                            value: item.value
                        };
                    }));
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            });
        },
        minLength: 2
    });

any help is greatly appreciated.

Answer 1

$("#usersearch").change(function () {
    //$('#SearchVendorId').val(0);
    if ($('#usersearch').val() != "") {
        $('#usersearch').addClass("errorTextBox");
        $('#usersearch').removeClass("successTextBox");
    }
    else {
        $('#usersearch').removeClass("successTextBox");
        $('#usersearch').removeClass("errorTextBox");
    }
});


$('#usersearch').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetUsers")',
            data: { term: request.term },
            dataType: 'json',
            type: 'GET',
            async : false,
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
               response($.map(data, function (item) {
                   alert(item.value);
                    return {
                        label: item.value,
                        value: item.value
                    };
                }));
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });
    },
    minLength: 2
});

try the async:false in ajax

Answer 2

You haven't posted your data response, but if it is an array of strings, the following should do it.

success: function (data) {
    response(data);                 
},

Since you've already provided the data in the format that it needs (a label and a value), you don't have to map the data. Just pass it directly into the response.