Menu
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>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.
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.
293
1 First, define an empty list ( filtered) that will hold the elements from the scores list. 2 Second, iterate over the elements of the scores list. If the element is greater than or equal to 70, add it to the... 3 Third, show the filtered list to the screen. More ...
If the user input does not matter I do not see the point of using the datalist element. Instead, you can opt for the classic select element that will show all the options (even though the user won't be able to enter text). If you have a different expected behaviour, like showing the options that do coincide first, please expand your question.
You can associate most input field types to a datalist element. I have also found it possible to associate multiple inputs to a single datalist. The association between an input field and a list is made by setting the input's list attribute to the id of the target datalist. This of course means you need to provide a unique id for each datalist.
The user input should not matter for the options that the browser would display, but it should still be possible to enter anything previously not in the list. Well if you have a large dataset you want to filter on input. The classic select is not good UX for this.
You can do it with a customised implementation of jQuery UI Autocomplete.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
