為什么在瀏覽器中不顯示JQuery自動完成結果？

Question

我有一個正在工作的小提琴，但是自動完成功能在瀏覽器中不顯示任何內容。 小提琴可以在這里看到：工作小提琴

在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
                            });
})

Answer 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
            });            
        }
    });
});

Answer 2

看起來您的腳本不在dom ready處理程序內。

在的jsfiddle，在左側面板中的第二個下拉onload告訴該應用添加一個包裹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
    });
})

為什么在瀏覽器中不顯示JQuery自動完成結果？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-10-07 17:33:05

解決方案2
0 2013-10-07 16:02:23

為什么在瀏覽器中不顯示JQuery自動完成結果？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-10-07 17:33:05

解決方案2 0 2013-10-07 16:02:23

解決方案1
1 已采納 2013-10-07 17:33:05

解決方案2
0 2013-10-07 16:02:23