我正在嘗試使用動態資料實作自動完成下拉串列，但它沒有在下拉串列中顯示任何建議。我正在使用這個例子 - 資料串列：https : //getbootstrap.com/docs/5.1/forms/form-control/ 它適用于預定義的選項標簽。
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
... dynamic data here
</datalist>
我確實從 PHP 腳本接收資料并且它們被正確訪問，但我認為問題可能是由于獲取延遲造成的。HTML 可能希望資料在加載時已經存在。這就是為什么它可能適用于現有資料。
這是我動態生成標簽的 fetch 函式中的 javacsript 代碼：
var select = document.getElementById("datalistOptions");
select.innerHTML = "";
for (var key in data['result']) {
var val = data['result'][key];
if (data['result'].hasOwnProperty(key) && key != "error") {
var val = data['result'][key];
if (val != "") {
var option = document.createElement("option");
option.value = val.id;
select.appendChild(option);
}
}
}
更新：我稍微更改了 js 代碼。現在它使用 appendChild 而不是 add 函式。前一個沒有向資料串列添加任何選項。appendChild 確實向串列中添加了選項，但不顯示它們。
uj5u.com熱心網友回復：
這是您嘗試執行的操作的更簡單版本。試著接受它，添加你的條件，如果可以的話，讓資料以那種形式出現。
var data = ["Haifa","Tel Aviv","Jerusalem"];
var select = document.getElementById("datalistOptions");
select.innerHTML = "";
for (var key in data) {
var option = document.createElement("option");
option.label = data[key];
option.value = data[key];
select.appendChild(option);
}
并確保你添加了呼叫你腳本的 onclick 事件，也許這是你的問題，你沒有呼叫腳本 - 我會推薦這樣的東西：
<input onclick="datalistCreate()" class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
datalistCreate() 是腳本中的函式名。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/370589.html
標籤：javascript html bootstrap-4
上一篇：isDisplayed,isEnabled,isSelected方法在Java腳本中可用，用于selenium中的shodowdom元素