通過遍歷JSON文件填充datalist選項

我試圖創建一個搜索框，基本上會自動完成根據用戶輸入從JSON文件中的鍵值對。它看起來像使用datalist可能是最好的選擇，但是當我執行下面的代碼時，沒有選項標籤出現在HTML中。通過遍歷JSON文件填充datalist選項

我對jquery和json仍然很陌生，所以我很樂於接受建議。

這是json。該列表包含1450項，如果這是相關的：

{ "osCars": [ 
{ "id": 1, 
    "name": "Cadillac", 
    "type": "Sedan", 
    "desc": "A fine American automobile" 
}, 
{ "id": 2, 
    "name": "BWM", 
    "type": "Sedan", 
    "desc": "A fine German automobile" 
}, 
{ "id": 3, 
    "name": "Lexus", 
    "type": "Sedan", 
    "desc": "A fine Japanese automobile" 
} 
]}

這裏的HTML：

<input type="text" maxlength="30" list="carList" id="carSearchBox" name="carSearchBox" pattern="[A-Za-z '-]*$" placeholder="search cars" autofocus autocomplete="on"> 
<datalist id="carList"></datalist> 
<script src="js/main.js"></script> 
<script>window.onload=getCars;</script>

而這裏的JavaScript/jQuery的：

function getCars() { 
    var url, carOption; 
    url = 'js/cars.json'; 

    $.getJSON(url, function(data) { 
    //populate the cars datalist 
     $(data.osCars).each(function() { 
      carsOption = "<option value=\"" + this.id + "\">" + this.name + "</option>"; 
      $('#carList').append(carsOption); 
     }); 
    }); 
}

來源

2013-12-17 pr0t0

事實證明，問題不在於我的JavaScript，因爲我懷疑，而是與我的JSON文件。我使用了一個不同的JSON文件的URL（我知道這是有效的），一切正常。我想使用的文件太長，無法用jsonLint進行驗證，並且有一些冗長的文本值。在我看不到的地方可能有一個錯誤的雙引號標記，那就是拋棄它。

來源

2013-12-18 16:33:28 pr0t0

我相信這個問題是你的這種使用.id作爲值，而不是this.name。看起來，HTML5中的數據列表和自動完成功能並沒有在瀏覽器中一致地實現。例如：在數據列表中，Chrome似乎有問題，選項的內部html（顯示值）與該值不同。

更改代碼中使用「this.name」兩個ID和值正常工作（在Chrome中至少）：

function getCars() { 
    $(data.osCars).each(function (idx, o) { 
     carsOption = "<option value='" + this.name + "'>" + this.name + "</option>"; 
     $('#carList').append(carsOption); 
    }); 
}

看到這個小提琴手例如： http://jsfiddle.net/6HGuU/

與此相關的問題： HTML5 datalist value vs. inner-text

如果你需要檢索選擇的ID而不是名稱，那麼你可以把它看作一個單獨的步驟（相關的問題包含一個回答r提出了一個方法來完成這個）。

來源

2013-12-17 03:35:50

嗯，我試着將this.id改成this.name，但它沒有任何效果（我也使用Chrome）。我看着你創建的小提琴，但它似乎不起作用，我不確定我們是在同一頁上關於我想要實現的。我正在尋找動態創建的選項標籤以在數據列表標籤之間出現。這是發生在你的小提琴嗎？它似乎不適合我。 ID並非嚴格意義上的......我只是更喜歡在後來搜索外部json文件時使用這些字符串。 – pr0t0

通過遍歷JSON文件填充datalist選項

回答

相關問題