为什么JQuery自动完成结果没有在浏览器中显示？

我有一个工作小提琴，但自动完成function不会在浏览器中显示任何内容。 这里可以看到小提琴 ： 工作小提琴

在HTML中，我有一个输入元素用于测试目的：

           
 
 
Test
 
 
  
 
  

在我的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文件。 “data”是一个数组数组，我循环遍历每个数组以创建一个对象，然后创建一个对象数组。 然后我使用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 }); }) 

Answer 1

你有两个主要问题：

1. 您正在将字符串传递给自动完成的source选项。 执行此操作时，窗口小部件会尝试将该字符串用作URL以从中检索结果。 由于此字符串是您作为AJAX调用的结果而构建的数组的JSON表示，因此显然不会按照您期望的方式工作。 您应该只使用arrayOfObjects 。

2. 您正在为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
		      	
 看起来你的脚本不在dom ready处理程序中。 
 在jsfiddle中，左侧面板onload的第二个下拉列表告诉应用程序为脚本添加一个包装上载处理程序 – 如果你on head选择它将无法工作小提琴 
 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 }); }) 
 演示： 小提琴 
 更新： 
 $(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 }); })