Question

我需要在Web应用程序中使用组合框行为。我遇到了以下解决方案：

＆＃13;

<input type="text" list="options" >
<datalist id="options" >
   <option>Asterix</option>
   <option>Obelix</option>
</datalist>

＆＃13;

但是，只要输入任何文本，Firefox和Chrome只会向用户显示适合已输入文本的选项。在该示例中，只要输入包含字母＆＃34; A＆＃34;，浏览器仅提供Asterix作为选项，但隐藏Obelix。

我想向用户显示datalist的所有条目，无论输入元素内部是什么。但是，我还想允许自定义输入。在该示例中，用户应该能够输入Methusalix，当他这样做时，我想浏览器仍然显示Asterix和Obelix作为替代方案。如何用HTML5实现这一目标？我打赌有一些选项允许这种行为，但我无法找到它。

我使用它来让用户在多个配置条目之间进行选择。用户可以从现有配置条目中进行选择，也可以通过编写尚不存在的名称来创建新条目。但是，我想让用户可以随时返回现有的选项，无论他如何命名丢弃的新的。

Answer 1

您可以使用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>

Answer 2

如果用户输入无关紧要，我没有看到使用datalist元素的重点。

相反，您可以选择显示所有选项的经典select元素（即使用户无法输入文字）。

＆＃13;

<form>
  <select name="options">
    <option>Asterix</option>
   <option>Obelix</option>
  </select>
  <br><br>
  <input type="submit">
</form>

＆＃13;

如果您有不同的预期行为，例如首先显示重合的选项，请展开您的问题。

Answer 3

规范不描述您希望显示建议的方式，而不是通常在UI控件上实现自动完成或建议的方式。

正如您所建议的那样，我认为您只能通过在javascript中编写自己的建议UI来做您想做的事情，而不依赖于任何有关用户体验的用户代理选择。

避免过滤输入元素中的datalist项

3 个答案: