为什么自动完成在这个带有 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 函数中的 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 确实将选项添加到列表中，但不会显示它们。

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() 是脚本中的函数名。