Why are JQuery autocomplete results not showing in browser?

Question

1.40M viewsSeptember 10, 2022html javascript jquery json

2

Lani1234 September 7, 2022 0 Comments

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 testing purposes:

<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type ="text/javascript" src="myScripts.js"></script>
<script type ="text/javascript" src="jquery.csv-0.71.js"></script>
<script type ="text/javascript" src="csvToArray.v2.1.js"></script>
</head>


<body>
<div data-role="page" id="main">

    <div data-role="header">
        <h1>Test</h1>
    </div>

    <div id="contentDiv" data-role="content">   
        <input type="text" id="food" placeholder="Type (First Name) Here" />        
    </div>

</div>
</body>

In my javascript, I am initializing a json variable by reading text from a file. I have tested that my initialization is successful by displaying an alert of my json variable. I am trying to use that json variable as the source in my autocomplete. Below, I have simplified my javascript by hard coding the initialization of the json variable in order to narrow down the problem:

var jsonVersion =       
[{"description":"mac and cheese", "servingSize":"1 cup", "calories":"500"},
 {"description":"slice of pizza", "servingSize":"1 slice", "calories":"400"},
 {"description":"oreo cookie", "servingSize":"1 cookie", "calories":"100"},
 {"description":"salad", "servingSize":"1 cup", "calories":"50"},
 {"description":"apple", "servingSize":"1 apple", "calories":"70"}];

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

Any idea why this would work in the fiddle but not in the browser? I am not getting any browser errors. Simply nothing is being displayed when I type in the textbox.

EDIT

Perhaps it is in the way I am populating my jsonVersion – although when I print the jsonVersion via “alert”, it looks right. Any advice on what I am doing wrong here would be appreciated. Here is the entire javascript file. “data” is an array of arrays and I am looping through each of those arrays to create an object, in turn creating an array of Objects. Then I convert the array of objects to json using stringify:

$(function ($) {
    var jsonVersion;
    var arrayOfObjects;
    $.ajax({
            type: "GET",
            url: "test.js",
            dataType: "text",
            success: function(data) {
                                    data = $.csv.toArrays(data);
                                    arrayOfObjects = new Array();
                                    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);
                                    }
                                    jsonVersion = JSON.stringify(arrayOfObjects);
                                    alert(jsonVersion); 
                                    }
            });

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

2 Answers

score 1 · Answer 1 · 2022-09-08T12:34:44+00:00

You have two major problems:

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.
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
            });            
        }
    });
});

score 0 · Answer 2 · 2022-09-08T02:03:27+00:00

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
    });
})