CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
Jean B
Jean B

Reputation: 341

JQuery AutoComplete with JSON Result Not Working

I am using a JQuery autocomplete to display a list of available courses. I am doing a post to get a list of Courses from the server, I manipulate the data to be in the expected format, and I pass it to the autocomplete function. The problem is that it does not work unless I hard copy and paste the values newSource and paste them into source. The variable newSource = ["Enc1001","ENC1002","Enc1003","ENC1101"....etc]. The ajax post to get the data from the server

//Auto complete for search box
$('#AdditionalSearch').on('input', function () {
    var source = [];
    var inputValue = $('#AdditionalSearch').val();
    if (inputValue !== '') { //the value is not empty, we'll do a post to get the data.
        url = "/Course/CourseSearch";
        $.ajax({
            method: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            cache: false,
            data: JSON.stringify({ "searchCourseValue": inputValue }),
            url: url,
            success: function (data) {
                if (data.Ok) {
                    var myData = JSON.parse(data.data);
                    var newSource = '[';
                    $.each(myData.ResultValue, function (index, item) {

                        if ((myData.ResultValue.length -1) == index)
                            newSource += '"' + item.Name+'"';
                        else
                            newSource += '"'+ item.Name + '",';
                    });
                    newSource += "]";
                    console.log(newSource);
                    source = newSource;
                }
                setNameAutoComplete(source);
            },
            error: function (jqXHR) {
                console.log(error);
            }
        });

    } else { //The user either delete all the input or there is nothing in the search box. 
            //The value is empty, so clear the listbox.
        setNameAutoComplete(source);
    }
});

//Passing the source to the auto complete function

var setNameAutoComplete = function (data) {
    console.log(data);
    $('#AdditionalSearch').autocomplete({
        source: data
    });
}

Is there something that I am missing here?

Upvotes: 0

Views: 291

Answers (1)

Paul-Jan
Paul-Jan

Reputation: 17278

When you literally paste newSource = ["Enc1001","ENC1002","Enc1003","ENC1101"....etc]in your code, you are building an array object. However, in your success method, you are building a string (the string-representation of that same object). What you want to be doing is build an actual array in stead. 

        ...
        success: function (data) {
            if (data.Ok) {
                var myData = JSON.parse(data.data);
                var newSource = [];
                $.each(myData.ResultValue, function (index, item) {
                        newSource.push(item.Name);
                });
                console.log(newSource);
                source = newSource;
            }
            setNameAutoComplete(source);
        },
        ...

Upvotes: 1

Related Questions