【发布时间】：2013-10-08 01:33:05
【问题描述】：
我有一个工作小提琴，但自动完成不会在浏览器中显示任何内容。小提琴可以在这里看到：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
});
知道为什么这会在小提琴中起作用但在浏览器中不起作用？我没有收到任何浏览器错误。当我在文本框中输入时，根本没有显示任何内容。
编辑
也许这是我填充 jsonVersion 的方式 - 尽管当我通过“alert”打印 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
});
})
【问题讨论】：
-
将方法包装在
$(function(){})- Fiddle 为您添加包装器 -
您的代码与小提琴中的代码不同。
jsonVersion中的对象是否具有description属性或label属性？如果您希望自动完成功能在不进行其他修改的情况下正常工作，您需要拥有label和/或value属性 -
您需要将
autocomplete初始化代码放在您的$.ajax成功函数中。 在小部件已初始化并且jsonVersion为空之后，请求正在完成。
标签： javascript jquery html json