如何在文本字段中键入内容时显示下拉框
[英]How to show the drop down box when something is typed in the text field
问题描述
Is there a click listener for the select tag? 
是否有select标签的点击监听器？ How do I trigger the select tag and show the dropdown box? 如何触发选择标记并显示下拉框？ Like this here 像这样在这里
function myFunction(obj) {
var dropdown= document.getElementById("dropdown");
dropdown.click(); ???
}
<div class="dropdown">
<input type="text" onkeyup="myFunction()"/>
<select id="dropdown" onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
3 个解决方案
解决方案1
1 已采纳 2017-08-19 19:20:06
You can do like below:- 你可以这样做： -
$(document).ready(function(){ $('input[type="text"]').on('keyup',function(){ $('#dropdown').attr('size',$('#dropdown option').length); }); });
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="dropdown"> <input type="text"/><br><br> <select id="dropdown"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </body> </html>
Note:- You can use third-party plugin like below 注意： - 您可以使用下面的第三方插件
Working example:- 工作范例： -
$(document).ready(function(){ $('input[type="text"]').on('keyup',function(){ $('#dropdown').editableSelect('show');; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script> <link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet"> <div class="dropdown"> <input type="text"/><br><br> <select id="dropdown"> <option>1</option> <option>2</option> <option>3</option> </select> </div>
解决方案2
1 2017-08-19 19:48:27
you can't really do that with a selctbox. 你不能用selctbox真正做到这一点。 One workaround would be to set the selectbox size to a number greater than 0. You can expand this to get the exact height of the selectbox (= number of options) and set it as attribute size: 一种解决方法是将selectbox大小设置为大于0的数字。您可以展开它以获得selectbox的精确高度（=选项数）并将其设置为属性大小：
$(document).ready(function(){ $('input[type="text"]').on('keyup',function(){ $('#dropdown').focus().attr('size', 3); }); });
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="dropdown"> <input type="text"/> <select id="dropdown"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </body> </html>
解决方案3
1 2017-08-19 20:39:01
https://github.com/indrimuska/jquery-editable-select https://github.com/indrimuska/jquery-editable-select
This jquery plugin works for me 这个jquery插件适合我
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.