我需要Web应用程序中的组合框行为.我遇到了以下解决方案:
<input type="text" list="options" >
<datalist id="options" >
<option>Asterix</option>
<option>Obelix</option>
</datalist>但是,只要输入任何文本,Firefox和Chrome只会向用户显示适合已输入文本的选项.在示例中,只要输入包含字母"A",浏览器就会提供Asterix作为选项但隐藏Obelix.
我想向用户显示datalist的所有条目,无论输入元素内部是什么.但是,我还想允许自定义输入.在示例中,用户应该能够进入Methusalix,当他这样做时,我想浏览器仍然显示Asterix和Obelix作为替代品.如何用HTML5实现这一目标？我敢打赌有一些选择允许这种行为,但我找不到它.
我使用它来让用户在多个配置条目之间进行选择.用户可以从现有配置条目中进行选择,也可以通过编写尚不存在的名称来创建新条目.但是,我想让用户可以随时返回现有的选项,无论他如何命名丢弃的新的.
您可以使用jQuery UI Autocomplete的自定义实现来完成此操作.
库使用自己的UI元素,因此您可以通过覆盖搜索和/或响应方法来更改下拉列表的行为,以便它始终返回所有项目.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select: </label>
<input id="autocomplete">
<script>
var data = [
{label: "Item 1", value: '1'},
{label: "Item 2", value: '2'}
];
$( "#autocomplete" ).autocomplete({
minLength: 0,
source: function( request, response ) {
response( data );
},
});
</script>
</body>
</html>
如果用户输入无关紧要，我看不出使用该datalist元素的意义。
相反，您可以选择select将显示所有选项的经典元素（即使用户将无法输入文本）。
<form>
<select name="options">
<option>Asterix</option>
<option>Obelix</option>
</select>
<br><br>
<input type="submit">
</form>如果您有不同的预期行为，例如首先显示一致的选项，请扩展您的问题。
小智 5
您希望建议显示的方式没有在规范中描述，也不是通常在UI控件上实现自动完成或建议的方式。
正如您所建议的，我认为您只能通过使用javascript编写自己的建议UI来做您想要的事情，而不依赖于任何有关用户体验的用户代理选择。