为什么自动完成在这个带有 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 名称。