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

我有一個工作小提琴，但自動完成不顯示任何東西在瀏覽器中。小提琴可以在這裏看到：Working Fiddle 爲什麼JQuery自動完成結果在瀏覽器中不顯示？

在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變量作爲源代碼。下面，我已經很難簡化我的JavaScript編碼的JSON變量的初始化，以縮小問題：

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的方式 - 雖然當我通過「警報」打印jsonVersion，它看起來正確的。任何意見，我在做什麼錯在這裏將不勝感激。這是整個JavaScript文件。「data」是一個數組數組，我循環遍歷每個數組以創建一個對象，然後創建一個Object數組。然後我使用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 
          }); 
})

來源

2013-10-07 Lani1234

包裹方法'$（函數（）{}）' - 小提琴替你增加包裝 – karthikr

你的代碼比不同小提琴中的代碼。'jsonVersion'中的對象是否有'description'屬性或'label'屬性？您需要有一個'label'和/或'value'財產，如果你想自動完成，而無需 –

您需要將您的'$ .ajax'成功函數內的'autocomplete'初始化代碼等的修改工作。在小部件初始化並且'jsonVersion'爲空之後，請求正在完成**。 –

你有兩個主要問題：

您正在將一個字符串傳遞給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 
      });    
     } 
    }); 
});

來源

2013-10-07 17:33:05

非常感謝。這個伎倆。順便說一下，對這兩個問題都有很好的解釋。 – Lani1234

@ Lani1234：沒問題！樂意效勞。 –

看起來像你的腳本不在dom ready handler中。

在的jsfiddle，在左側面板onload第二個下拉通知應用程序添加一個包裹onload事件處理程序的腳本 - 如果你選擇on head它不會工作fiddle

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

演示：Fiddle

更新：

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

來源

2013-10-07 16:02:23

謝謝。向前一步。現在，我得到一個瀏覽器錯誤：對象[對象的對象]的屬性「來源」不是一個函數 – Lani1234

@ Lani1234什麼是對象的錯誤 –

房產「來源」的翻譯：不是一個函數 – Lani1234

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

回答

相關問題