javascript - 键入时自动选择数据列表中的第一个选项
问题描述
我有一个连接到输入的数据列表
<input list='typesOfFruit' placeholder="Enter a fruit...">
<datalist id='typesOfFruit'>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</datalist>
当用户正在输入Ap...
如何使它已经选择了最重要的建议“Apple”时,如果它是正确的,他们可以直接按 Enter,而不必按向下箭头然后输入。
编辑:类似的问题,但没有人回答正确:如何自动选择数据列表中的第一项(html 5)?
我需要在键入时自动选择最重要的建议,而不是静态选择列表中的第一项。因此,如果我按 B,香蕉将是最佳建议,我想知道是否可以让它自动对焦,以便用户可以按 ENTER 而不是向下箭头输入
解决方案
您可以通过维护datalist
选项的自定义查询过滤器来做到这一点。
试试下面的代码。如果您已经知道数据,则可以减少样板options
。
希望这可以帮助!
var input = document.querySelector("input");
var options = Array.from(document.querySelector("datalist").options).map(function(el){
return el.innerHTML;
}); //Optional if you have data
input.addEventListener('keypress', function(e){
if(e.keyCode == 13){
var relevantOptions = options.filter(function(option){
return option.toLowerCase().includes(input.value.toLowerCase());
}); // filtering the data list based on input query
if(relevantOptions.length > 0){
input.value = relevantOptions.shift(); //Taking the first
}
}
});
<input list='typesOfFruit' placeholder="Enter a fruit...">
<datalist id='typesOfFruit'>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</datalist>
推荐阅读
- python - 在熊猫中连接并保存多对CSV
- android - 从 Android Studio 中提取的 adb 和数据库未在 SQLiteDatabaseBrowser 3.10.1 中更新
- android - ViewModelProviders 实例化失败,因为“of”无法解决
- python - 使用 Python 从 Linux 核心服务器下载经过身份验证的 Django 应用程序的文件
- node.js - 早午餐构建因 CoffeeScript 失败
- python-3.x - 由于路径而导致运行爬网命令出现问题
- javascript - document.getElementById 在长函数之前不起作用?
- javascript - 我们可以在数据表的多个列中搜索多个字符串吗?
- angular - 更改 ag-grid 上的页面和缓存块大小会导致项目无限加载
- java - @PathVariable UUID... 带有逗号分隔的 ID 不起作用:返回 400 响应