我有一个可以工作的 fiddle ，但自动完成功能没有在浏览器中显示任何内容。 fiddle 可以在这里看到:Working Fiddle
在 HTML 中，我有一个用于测试目的的输入元素:
<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>
在我的 javascript 中，我通过从文件中读取文本来初始化一个 json 变量。我已经通过显示我的 json 变量的警报来测试我的初始化是否成功。我正在尝试将该 json 变量用作自动完成中的源。下面，我通过硬编码 json 变量的初始化来简化我的 javascript，以缩小问题范围:
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
});
知道为什么这会在 fiddle 中起作用但在浏览器中不起作用吗？我没有收到任何浏览器错误。当我在文本框中键入内容时，根本没有显示任何内容。
编辑
也许这是我填充 jsonVersion 的方式 - 虽然当我通过“警报”打印 jsonVersion 时，它看起来是正确的。任何关于我在这里做错的建议都将不胜感激。这是整个 javascript 文件。 “数据”是一个数组数组，我循环遍历每个数组以创建一个对象，进而创建一个对象数组。然后我使用 stringify 将对象数组转换为 json:
$(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
});
})
最佳答案
你有两个主要问题:
您将字符串传递给自动完成的
source选项。当您这样做时，小部件会尝试将该字符串用作 URL 以从中检索结果。由于此字符串是您作为 AJAX 调用结果构建的数组的 JSON 表示形式，因此这显然不会按照您期望的方式工作。您应该改用arrayOfObjects。您在 AJAX 请求的
success回调之外初始化自动完成小部件。这意味着自动完成小部件使用空源进行初始化。您可以通过简单地将初始化移动到success回调中来修复。
解决这两个问题应该可以解决您的问题:
$(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
});
}
});
});
关于javascript - 为什么 JQuery 自动完成结果不显示在浏览器中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19229403/