How can I show the user's choice when they click on input type text using JavaScript?
I want to use onclick on input type text. When the user clicks, I want to show their choice.
I tried searching for a function to do that, but I did not find any.
Could you please advise me on how to do that?
Image:
*remark : Australia , United Kingdom and United States not from database.
How can I show the user's choice when they click on input type text using JavaScript?
I want to use onclick on input type text. When the user clicks, I want to show their choice.
I tried searching for a function to do that, but I did not find any.
Could you please advise me on how to do that?
Image:
*remark : Australia , United Kingdom and United States not from database.
Share Improve this question edited Sep 21, 2015 at 19:37 Maximillian Laumeister 20.4k10 gold badges61 silver badges83 bronze badges asked Sep 21, 2015 at 18:04 robert qewerutiyorobert qewerutiyo 1653 silver badges12 bronze badges 2- 2 are you using jQuery's autoplete? – Saubar Commented Sep 21, 2015 at 18:07
- One way to do this could be with Chosen (harvesthq.github.io/chosen). – Henrik Commented Sep 21, 2015 at 18:21
3 Answers
Reset to default 6you can use below code if your browser supports html5
<html>
<body>
<label for="country_name">Country : </label><input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
<option value="Australia">
<option value="United Kingdom">
<option value="United States">
</datalist>
</body>
</html>Reinventing the wheel. :)
If you need to support ancient browsers (hope it should work for older IE versions?), for some reason, you could use pretty simple JS.
HTML&CSS setup (just for demo purposes, can be tweaked to fit your needs)
<div id="autoplete">
<input type="text" autoplete="off" id="search">
<ul id="options">
</ul>
</div>
Notice usage of autoplete=off (to prevent default browser behavior)!
Simple CSS:
#autoplete {
width:200px;
position:relative;
height:300px;
}
#search {
width:200px;
height:30px;
border:1px solid #666;
margin:0;
}
#options {
margin:2px;
padding:0;
display:none;
list-style-type:none;
border:1px solid #666;
position:absolute;
top:30px;
left:0px;
width:100%;
}
#options li {
line-height:25px;
color:blue;
cursor:pointer;
}
And pretty simple javascript:
countries=['Australia','United Kingdom','United States'];
input=document.getElementById('search');
options=document.getElementById('options');
for(i=0;i<countries.length;i++) {
options.innerHTML+='<li>'+countries[i]+'</li>';
}
document.body.onclick=function(event) {
if(event.target!=input)
options.style.display='none';
}
input.onclick=function() {
this.value='';
options.style.display='block';
}
for(i=0;i<countries.length;i++) {
options.getElementsByTagName('li')[i].onclick = function(){
input.value= this.textContent;
}
}
So, place options in array, set variables for text and list, populate list with array values, hide list on outside click, show it on input click, replace input text with chosen list item.
Demo: http://jsfiddle/yerfemr4/2/
You can use an html 'select' tag.
example:
<select>
<option value=""></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>