I find the new <datalist> generally very useful, but I think that the suggestions are not visible enough. Is there a way to trigger the display of datalist suggestions using javascript?
As an example, I have a datalist on an <input type="number"> (jsFiddle).
<label>
Enter a Fibonacci number:
<input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="5">
<option value="8">
<option value="13">
<option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>
<script>
$('#show-suggestions').click(function() {
// .showSuggestions() does not exist.
// I'd like it to display the suggested values for the input field.
$('#myinput').showSuggestions();
});
</script>
In Chrome, the full list of suggestions is shown only when the input is empty, already has focus, and the user then clicks on the input. The down arrow does not show the suggestions - it simply decrements the value.
I'd like to make the suggestions more visible. As an example I've added a button that's supposed to open the list of suggestions. What do I put in the onClick-handler?
I've used Chrome, jQuery and a number-input in this example, but I'd prefer a generic solution independent of all of those.
If you remove the type="number" your users can get the dropdownlist using the basic alt+downarrow keyboard shortcut.
If that doesn't work for you. I suggest using a hybrid approach such as https://github.com/mmurph211/Autocomplete
Picking your country from a list containing more than 200 options is an ideal candidate for an autocomplete control. Define a with child elements for every country directly in an HTML page:
<datalist id="countrydata">
<option>Afghanistan</option>
<option>Åland Islands</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
...etc...
</datalist>
Related
I've got input, that shows some values when i type number. That i wanna do is show all datalist, when i try try select. I found answer, but it is written in jquery.
How to show all option no matter what i'm input?
<span>
<input
type="number"
list="values"
value={this.state.values}
onChange={this.valuesHandler}
/>
<datalist id="values">
<option value="200" />
<option value="250" />
<option value="300" />
<option value="350" />
<option value="500" />
</datalist>
</span>
onChange
valuesHandler(e) {
this.setState({ values: +e.target.value })
this.forceUpdateHandler()
}
Now it looks like that
But it should look like that on any value
Unfortunately (as of today) it is not possible to control the display of datalist options with css.
datalist was created to filter on the input as you type.
I would recommend creating your own autocomplete or dropdown component using different elements if you need something more flexible.
Something like react-select https://jedwatson.github.io/react-select/ might work as well.
More info on datalist here https://www.w3schools.com/tags/tag_datalist.asp
I want users to be able to type text into the text box I set up.
If they do not know their options, I want them to be able to click expand and select from a drop-down menu, such as on this page.
How can I get this?
For HTML only solution use <datalist>:
<input list="somelist" name="myBrowser" />
<datalist id="somelist">
<option value="option1">
<option value="option2">
<option value="option3">
</datalist>
For a bit more custom solution you can use jQuery UI's Autocomplete
To get more options you can use select2
There is built-in autocomplete function as a part of the input element in all major browsers. It usually drops down when user starts typing. Is there a way of controlling the list? I mean something like
<input id="abc" type="text" />
<script>
//this does not work, obviously
var cars=["Saab","Volvo","BMW"];
document.getElementById("abc").autocomplete.list=cars;
</script>
... without using JQuery ... It's probably dream-of feature, isn't it?
Nobody said it is not possible so far :)
As suggested in comments try HTML5's datalist
<input type="text" id="country" list="someCountries" />
<datalist id="someCountries">
<option label="United Stated" value="USA"></option>
<option label="United Kingdom" value="UK"></option>
<option label="Uruguay" value="URU"></option>
<option label="Brazil" value="BRA"></option>
<option label="Russia" value="RUS"></option>
</datalist>
More here
I have a list of select elements:
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
I'd like to somehow either translate the entire list of select elements into text OR, populate a new form (with an input type=text) with the contents of the select elements list as one string of text.
I tried:
<form action="/search/{{search_type}})" method="get">
<input type="text" name="qTag">
<input type="submit" value=" Search Tags">
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
</form>
This did not work in that it not only did not accomplish what I'm trying to do but it also broke the select functionality.
In case its not very obvious, I have no experience with html or javascript or jquery, I'm just trying to get something working with temporary code, so any quick and dirty suggestion would be great.
Hello you could use html5 to achieve that easily, its called a datalist its a new form type in html5 which is very useful hope this helps - Andrew
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
First you need that the <select> element contains some <option> elements. See some reference here!
Then, you can get the list of select elements using javascript and populate it in the text field. Install jQuery and use this example to work on your code. I hope that helps you!
I'm using jQueryUI multi-select Widget that draws a nice dropdown menu widget for multi-selects.
I have an already sorted (on username) multiselect like that:
<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="44">bbb</option>
<option value="21" selected="selected">ccc</option>
<option value="50">ddd</option>
<option value="16">eee</option>
<option value="25" selected="selected">fff</option>
</select>
And I want to keep the username sorting, but moving the selected items to the top of the list, everytime the user opens the drop down menu. So in this example the new order must be:
<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="21" selected="selected">ccc</option>
<option value="25" selected="selected">fff</option>
<option value="44">bbb</option>
<option value="50">ddd</option>
<option value="16">eee</option>
</select>
From the website of the widget, I see that it has a method that returns an array of selected items, and it has an event beforeopen. So I think I can manage the sorting (using that array) by handling the event beforeopen, but I'm rather new to javascript, anyone can point me in the right direction please?
I searched here, and all the solution I found solve the problem "sort on text" (which is not what I need).
EDIT: I solved in this way:
$('#id_users').multiselect({
beforeopen: function(event, ui) {
$('#id_users option:selected').prependTo('#id_users');
$('#id_users').multiselect('refresh');
}
});
So in initialization of the widget, I bind those two lines of code to the beforeopen event.
In the handling of beforeopen I prepend the selected items to the others, and refresh the widget (because it reads the multi-select only once, and if you don't refresh the order remains the same, even if the HTML changes).
I can't upvote the answer because I don't have enough reputation. But thanks!
Try this.
$('#id_users option:selected').prependTo('#id_users')
→