I would like have a field that shows a set of pre-defined options to choose from, but also for the user to add their own entry if none of the options apply, i.e.
I have a look at using an input field with the new DATALIST. It’s not quite ideal, because users don’t see the full list of choices once they start typing. And they might not even realise that there are pre-defined choices.
Any ideas? Many thanks.
Hi, you can simply use HTML <OPTION> tags to generate your predefined list and have a “Other” option tag. When users click on other option tag, a text box will appear where users can specify their own. Lets look at the code.
<select id=“select1” onchange=“check(‘select1’,‘text1’);”>
<option id=“option1” value=“option1”>Volvo</option>
<option id=“option2” value=“option2”>Saab</option>
<option id=“option3” value=“option3”>Opel</option>
<option id=“option4” value=“option4”>Audi</option>
<option id=“option5” value=“option5”>Other</Option>
</select>
<input id=“text1” type=“text” value=“Please Specify” style=“display:none;”/>
<script type=“text/javascript”>
function check(select,text){
var index = document.getElementById(select).selectedIndex;
if(index==4){
document.getElementById(text).style.display=“block”;
} else {
document.getElementById(text).style.display=“none”;
}
}
</script>
If you’re looking for something else, please specify.
Check out the following link to have a look on HTML option tag
http://www.w3schools.com/tags/tag_option.asp
Agreed with Rani, I would use something like this before messing with datalist simply because of browser support (so you’d be using Javascript anyway).
Only thing I’d add to Rani’s code is, on the display:none input, I’d add aria-role=alert which in many (but not all yet) browsers will work to read the text of the input once it’s become visible.
When I made a datalist example a few years ago, in Opera if the user focussed on the input, the possibilities all showed. Later, in webkit you had to down-arrow, which would mean many users would have no idea there were pre-written options. At the time I don’t believe anyone else supported it.
