Fatal编程技术网
  • javascript/
  • Javascript 为什么JQuery自动完成结果不显示在浏览器中？

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

javascript jquery html json

Javascript 为什么JQuery自动完成结果不显示在浏览器中？,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我有一把工作小提琴，但自动完成功能在浏览器中不显示任何内容。这里可以看到小提琴： 在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/jq

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

在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>
你知道为什么这可以在小提琴上使用，但不能在浏览器上使用吗？我没有收到任何浏览器错误。当我在文本框中键入时，没有显示任何内容

编辑

也许这是我填充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
                            });
})
看起来您的脚本不在dom就绪处理程序中

在jsfiddle中，在左侧面板的第二个下拉列表中，onload告诉应用程序为脚本添加一个包装onload处理程序——如果您在head上选择，它将不起作用

演示：

更新：

$(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
    });
})
您有两个主要问题：

您正在将字符串传递给自动完成的源选项。执行此操作时，小部件将尝试使用该字符串作为URL从中检索结果。因为这个字符串是作为AJAX调用的结果构建的数组的JSON表示，所以它显然不会按照您期望的方式工作。您只需使用arrayOfObjects即可

您正在AJAX请求的成功回调之外初始化autocomplete小部件。这意味着自动完成小部件是用空源初始化的。只需将初始化移到成功回调中，即可修复此问题

解决这两个问题应该可以解决您的问题：

$(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
            });            
        }
    });
});
在$function{}中包装方法-Fiddle为您添加包装器您的代码与Fiddle中的代码不同。jsonVersion中的对象有描述属性还是标签属性？如果希望自动完成在不进行其他修改的情况下工作，则需要具有label和/或value属性。您需要将自动完成初始化代码放在$.ajax success函数中。小部件初始化且jsonVersion为空后，请求将完成。谢谢。向前迈出了一步。现在我遇到了一个浏览器错误：object[object object]的属性'source'不是函数object[object object]的属性'source'不是函数谢谢你，这消除了错误，但是现在当我在文本框中键入时，仍然没有显示任何内容。您认为我使用了错误的jQuery库吗？非常感谢。这就成功了。对了，这两个问题的解释都很好。@Lani1234:没问题！很乐意帮忙。 
$(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
    });
})

$(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
            });            
        }
    });
});