Why are JQuery autocomplete results not showing in browser?
Question
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
solution1
1 ACCPTED 2013-10-07 17:33:05
You have two major problems:
You're passing a string to the
sourceoption 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 usearrayOfObjectsinstead.You're initializing the autocomplete widget outside of the
successcallback 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 thesuccesscallback.
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
});
}
});
});
solution2
0 2013-10-07 16:02:23
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
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.