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

Why are JQuery autocomplete results not showing in browser?

本文关键字：显示浏览器结果 JQuery 为什么更新时间：2023-09-26

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

在 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文件。 "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
                            });
})

您有两个主要问题：

您要将字符串传递给自动完成的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
            });            
        }
    });
});

看起来您的脚本不在 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
    });
})