为什么在 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 可能期望数据在加载时已经存在。这就是为什么它可能适用于现有数据。

这里是动态生成标签的获取函数中的 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()是脚本中的函数名

为什么在 Bootstrap 的这个例子中自动完成不起作用？

Why auto complete does not work in this example with Bootstrap?

html

javascript

bootstrap-4