Menu
As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve the same purpose since the user is presented with a list of options and the value is recorded in an input text field.
The limitation here is the list does not appear until the user start typing something in the text field and even then is only shown possible matches based on their input. The behavior I want is that as soon as there is focus on the field the entire list of options become visible.
So I have this code - view on jsbin
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Input - Datalist</title> </head> <body> <input list="categories"> <datalist id="categories"> <option value="Breakfast">Breakfast</option> <option value="Brunch">Brunch</option> <option value="Lunch">Lunch</option> <option value="Dinner">Dinner</option> <option value="Desserts">Desserts</option> </datalist> </body> </html> and I'm trying to get that to show with this Javascript:
var catVal = document.getElementsByTagName("input")[0], cat = document.getElementById("categories"); catVal.style.fontSize = "1.3em"; catVal.addEventListener("focus", function(event){ cat.style.display = "block"; }, false); Any help would be appreciated,
Cheers
274
The list attribute of the input element is used to bind it together with a datalist element.
The datalist tag is introduced in HTML5. The <datalist> tag should be used with an <input< element that contains a "list" attribute. The value of "list" attribute is linked with the datalist id.
Select input element presents options for the users from which they need to select one of them. On the otherhand, Datalist presents a list of suggested values to the associated input form (text) field and users are free to select one of those suggested values or type in their own value.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
I use the following code:
<input name="anrede" list="anrede" value="Herr" onmouseover="focus();old = value;" onmousedown = "value = '';" onmouseup="value = old;"/> <datalist id="anrede"> <option value="Herr" selected></option> <option value="Frau"></option> <option value="Fraulein"></option> </datalist> mouseover:
Set focus and memorize old value in a -- g l o b a l -- variable
mousedown:
Delete value and show datalist (built in functionality)
mouseup:
Restore old value
Then select new value.
Find this an acceptable workaround towards a combobox.
56
I hope you like this solution:
I added a “temp” attribute to the input field for storage and once the mouse hovers over the input filed it will save its current value in temp and then delete the value so as to allow the datalist to open.
On mouseout it will restore the field’s value from the variable temp. This solution works great under Chromium that I tested.
As a bonus you can add a placeholder="Click to see all your options"
<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;"> <datalist id="myDatalist" open="open"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>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
