HTML/JS：显示所有选项的 Datalist 的替代品无自动完成

编程问答 2022-05-28

问题描述

我仍然是一个完全的网络开发菜鸟。目前我正在为我的网站开发一个搜索栏。现在，我将数据列表附加到我的搜索输入中，作为显示建议的一种方式。 Javascript 根据我的搜索算法 (onKeyUp) 的结果动态地向数据列表添加选项。 但我想显示所有选项，而不仅仅是整个选项集的自动完成选项。 我喜欢 datalist，因为它可以立即工作而无需修改我的 CSS。 是否有某种方法可以使用像数据列表这样简单的东西来完成该任务，或者是否有一些我没有找到的解决方法？ 我找到的那些似乎对我不起作用。

非常感谢您的帮助。

编辑： HTML：

   <input type="search" list="dataList" onkeyup="onKeyUp(this.value)"  placeholder="search...">
    <datalist id="dataList"></datalist>

JS：

function onKeyup(text){
     const dataList = document.getElementbById('dataList');
    
     // this contains the strings i want to display in my dataList
     // you can imagine it as ["apple","orange","banana"]
     // I want to display all of those elements,no matter what text was entered
     let myArr = mySearchAlgorithm(text);
     dataList.innerHTML = "";
     myArr.forEach(string => {
         console.log(string);
         const option = document.createElement('option');
         option.setAttribute('value',string);
         dataList.appendChild(option);
    });
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

autosuggestautosuggesthtmlhtml-datalistjavascriptsearch