避免过滤输入元素中的数据列表项 [英] Avoid filtering of datalist items in an input element
问题描述
我需要Web应用程序中的组合框行为。我遇到了以下解决方案：
I need a combo-box behavior in a web application. I came across the following solution:
<input type="text" list="options" >
<datalist id="options" >
<option>Asterix</option>
<option>Obelix</option>
</datalist>
但是，一旦输入了任何文本，Firefox和Chrome只会向用户显示适合已输入文本的那些选项。在示例中，只要输入中包含字母 A，浏览器将仅提供Asterix作为选项，而隐藏Obelix。
However, as soon as any text is entered, Firefox and Chrome only show the user those options that fit to the already entered text. In the example, as soon as the input contains the letter "A", the browser only offers Asterix as an option but hides Obelix.
我想向用户显示数据列表的所有条目，无论输入元素中写了什么。但是，我也想允许自定义输入。在示例中，用户应该能够输入 Methusalix ，当他这样做时，我想在浏览器上仍然显示Asterix和Obelix作为替代。 HTML5如何实现？我敢打赌有一些选项可以允许这种行为，但是我找不到。
I would like to show the user all entries of the datalist, regardless of what is written inside the input element. However, I would also like to allow custom inputs. In the example, the user should be able to enter Methusalix and when he does, I would like to browser to still show Asterix and Obelix as alternatives. How can this be achieved with HTML5? I'd bet there is some option to allow this behavior, but I can't find it.
我正在使用它来让用户在多个配置条目之间进行选择。用户可以从现有配置条目中进行选择，也可以通过写一个尚不存在的名称来创建一个新的条目。但是，无论用户如何命名废弃的新名称，我都希望用户可以随时返回到现有名称。
I am using this to let the user chose between multiple configuration entries. The user may either chose from the existing configuration entries or create a new one by writing a name that does not exist yet. However, I would like to give the user the option to go back to the existing ones at any time, regardless of how he had named the discarded new one.
推荐答案
您可以使用 jQuery UI自动完成的自定义实现来实现。
You can do it with a customised implementation of jQuery UI Autocomplete.
该库使用其自己的UI元素，因此您可以通过覆盖搜索和/或响应方法来更改下拉菜单的行为，以便它始终返回所有项目。
The library uses its own UI elements so you can change the behaviour of the dropdown by overriding the search and/or response methods so it always returns ALL items.
<!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>
这篇关于避免过滤输入元素中的数据列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
