使用JavaScript单击输入类型文本时如何显示选项？
[英]How to show choice when click on input type text using JavaScript?
问题描述
How can I show the user's choice when they click on input type text using JavaScript? 
如何在用户使用JavaScript单击输入类型文本时显示用户的选择？
I want to use onclick on input type text. 我想在输入类型文本上使用onclick。 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. *备注：澳大利亚，英国和美国不是来自数据库。
3 个解决方案
解决方案1
5 2015-09-21 18:13:09
you can use below code if your browser supports html5 如果您的浏览器支持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>
解决方案2
4 已采纳 2015-09-21 19:04:24
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. 如果你需要支持古老的浏览器（希望它适用于旧的IE版本？），出于某种原因，你可以使用非常简单的JS。
HTML&CSS setup (just for demo purposes, can be tweaked to fit your needs) HTML和CSS设置（仅用于演示目的，可以调整以满足您的需求）
<div id="autocomplete">
<input type="text" autocomplete="off" id="search">
<ul id="options">
</ul>
</div>
Notice usage of autocomplete=off (to prevent default browser behavior)! 请注意autocomplete=off （以防止默认的浏览器行为）！
Simple CSS: 简单的CSS：
#autocomplete {
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: 而且非常简单的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.net/yerfemr4/2/ 演示： http ： //jsfiddle.net/yerfemr4/2/
解决方案3
1 2015-09-21 18:08:23
You can use an html 'select' tag. 您可以使用html'select'标记。
example: 例：
<select> <option value=""></option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.