javascript - How to show the drop down box when something is typed in the text field

Is there a click listener for the select tag? 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>

Is there a click listener for the select tag? 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>

Share Improve this question edited Aug 19, 2017 at 21:25 Death-is-the-real-truth 72.3k10 gold badges57 silver badges104 bronze badges asked Aug 19, 2017 at 19:14 Richard 5965 silver badges12 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

https://github./indrimuska/jquery-editable-select

This jquery plugin works for me

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./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

editable-select

Working example:-

$(document).ready(function(){
  $('input[type="text"]').on('keyup',function(){
   $('#dropdown').editableSelect('show');;
  }); 
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgithub./indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub./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>

you can't really do that with a 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:

$(document).ready(function(){
  $('input[type="text"]').on('keyup',function(){
    $('#dropdown').focus().attr('size', 3);
  }); 
});

<html>
<script src="https://ajax.googleapis./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to show the drop down box when something is typed in the text field - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)