Why Are JQuery Autocomplete Results Not Showing In Browser?

I have a working fiddle, but the autocomplete does not display anything in the browser. The fiddle can be seen here: Working Fiddle In the HTML, I have one input element for testi

Solution 1:

You have two major problems:

1. You're passing a string to the source option of autocomplete. When you do this, the widget attempts to use that string as a URL to retrieve results from. Since this string is a JSON representation of the array you built as the result of the AJAX call, this is obviously not going to work the way you expect it to. You should simply use arrayOfObjects instead.

2. You're initializing the autocomplete widget outside of the success callback for your AJAX request. This means that the autocomplete widget is initialized with an empty source. You can fix by simply moving the initialization into the success callback.

Fixing both of these things should fix your issues:

$(function ($) {
    $.ajax({
        type: "GET",
        url: "test.js",
        dataType: "text",
        success: function(data) {
            data = $.csv.toArrays(data);
            var arrayOfObjects = [];
            for(var i=1; i<data.length; i++)//skipping over header
            {
                var foodObject = new Object();
                foodObject.label = data[i][1];
                foodObject.weight = data[i][2];
                foodObject.servingSize = data[i][3];
                foodObject.calories = data[i][4];
                arrayOfObjects.push(foodObject);
            }

            $('#food').autocomplete({
                source: arrayOfObjects,
                select: function (event, ui) {
                    selectedObj = ui.item;
                    alert("selected object=" + selectedObj.value);
                },
                minLength: 1
            });            
        }
    });
});

Solution 2:

Looks like your script is not inside dom ready handler.

In jsfiddle, in the second dropdown in the left side panel onload tells the app to add a wrapping onload handler for the script - if you select on head it will not work fiddle

jQuery(function ($) {
    var jsonObject = [{
        "label": "mac and cheese",
            "servingSize": "1 cup",
            "calories": "500"
    }, {
        "label": "slice of pizza",
            "servingSize": "1 slice",
            "calories": "400"
    }, {
        "label": "oreo cookie",
            "servingSize": "1 cookie",
            "calories": "100"
    }, {
        "label": "salad",
            "servingSize": "1 cup",
            "calories": "50"
    }, {
        "label": "apple",
            "servingSize": "1 apple",
            "calories": "70"
    }];

    $('#food').autocomplete({
        source: jsonObject,
        select: function (event, ui) {
            selectedObj = ui.item;

            alert("selected object=" + selectedObj.value);
        },
        minLength: 1
    });
})

Demo: Fiddle

Update:

$(function ($) {
    var arrayOfObjects = [];
    $.ajax({
        type: "GET",
        url: "test.js",
        dataType: "text",
        success: function (data) {
            data = $.csv.toArrays(data);
            for (var i = 1; i < data.length; i++) //skipping over header
            {
                var foodObject = new Object();
                foodObject.label = data[i][1];
                foodObject.weight = data[i][2];
                foodObject.servingSize = data[i][3];
                foodObject.calories = data[i][4];
                arrayOfObjects.push(foodObject);
            }
        }
    });

    $('#food').autocomplete({
        source: arrayOfObjects,
        select: function (event, ui) {
            selectedObj = ui.item;
            alert("selected object=" + selectedObj.value);
        },
        minLength: 1
    });
})