微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决HTML/JS:显示所有选项的 Datalist 的替代品无自动完成

我仍然是一个完全的网络开发菜鸟。目前我正在为我的网站开发一个搜索栏。现在,我将数据列表附加到我的搜索输入中,作为显示建议的一种方式。 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 举报,一经查实,本站将立刻删除。