為什么自動完成在這個帶有 Bootstrap 的示例中不起作用？

Question

我正在嘗試使用動態數據實現自動完成下拉列表，但它沒有在下拉列表中顯示任何建議。 我正在使用這個示例 - 數據列表： 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 function 中的 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 而不是添加 function。 前一個沒有向數據列表添加任何選項。 appendChild 確實將選項添加到列表中，但它不顯示它們。

Answer 1

這是您嘗試做的更簡單的版本。 試着接受它，添加你的條件，如果可以的話，讓數據以那種形式出現。

     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() 是腳本中的 function 名稱。