为什么JQuery自动完成结果不能在浏览器中显示？ [英] Why are JQuery autocomplete results not showing in browser?
问题描述
我有一个工作小提琴，但自动完成不会在浏览器中显示任何东西。小提琴可以在这里看到：工作小提琴
在HTML中，我有一个输入元素用于测试：
< head>
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css/>
< link rel =stylesheethref =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 / javascriptsrc =myScripts.js>< / script>
< script type =text / javascriptsrc =jquery.csv-0.71.js>< / script>
< script type =text / javascriptsrc =csvToArray.v2.1.js>< / script>
< / head>
< body>
< div data-role =pageid =main>
< div data-role =header>
< h1>测试< / h1>
< / div>
< div id =contentDivdata-role =content>
< input type =textid =foodplaceholder =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：披萨片， servingSize：1片，卡路里：400}，
{description：oreo cookie，servingSize：1 cookie，calories：100
{description：salad，servingSize：1 cup，calories：50}，
{description：apple，servingSize：1苹果，卡路里：70}];
$ b $（'＃food'）。autocomplete（{
source：jsonVersion，
select：function（event，ui）{
selectedObj = ui.item;
alert（selected object =+ selectedObj.value）;
}，
minLength：1
}）;
任何想法为什么这可以在小提琴中工作，但不在浏览器中？我没有收到任何浏览器错误。当我输入文本框时，没有任何显示。
编辑
也许这是我的方式我正在填充我的jsonVersion - 尽管当我通过alert打印jsonVersion时，它看起来是正确的。任何意见，我在做什么错在这里将不胜感激。这是整个JavaScript文件。 data是一个数组数组，我循环遍历每个数组以创建一个对象，然后创建一个Object数组。然后我使用stringify将对象数组转换为json：
$（function（$）{
var jsonVersion;
var arrayOfObjects;
$ .ajax（{
类型：GET，
url：test.js，
dataType：text，
成功：函数（数据）{
data = $ .csv.toArrays（data）;
arrayOfObjects = new Array（）;
for（var i = 1; i< data。 （）;
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）;
}
}）;
$ b $（'＃food'）。autocomplete（{
source：jsonVersion，
select：function（event，ui）{
selectedObj = ui.item;
alert（selected object =+ selectedObj.value）;
}，
minLength：1
}）;
}）
：
-
您将字符串传递给
源选项自动完成。当你这样做时，小部件会尝试使用该字符串作为URL来从中检索结果。由于这个字符串是您作为AJAX调用结果构建的数组的JSON表示形式，因此这显然不会按您期望的方式工作。您应该简单地使用arrayOfObjects。 您正在初始化自动填充小部件c $ c>成功为您的AJAX请求回叫。这意味着自动填充小部件将使用空白源进行初始化。您可以通过简单地将初始化移动到
success 回调中来解决问题。
$ b
$（函数（$）{
$）。 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 ++）//跳过标题
{
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，
选择：function（event，ui）{
selectedObj = ui.item;
alert（selected object =+ selectedObj.value）;
}，
minLength：1
}）;
}
}）;
}）;
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
});
})
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
});
}
});
});
这篇关于为什么JQuery自动完成结果不能在浏览器中显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
