All geek questions in one place

How to show a drop-down list when something is typed in a text box

Is there a click listener for the select tag? How to call the select tag and show a dropdown list? Like here 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>
+4
source share
3 answers

You can do the following: -

$(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>
Run codeHide result

Note. - You can use a third-party plugin as shown below

editable-select

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>
Run codeHide result
+1
source

selctbox. 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>
Hide result
+1

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

This jquery plugin works for me

+1
source

Source: https://habr.com/ru/post/1684040/

More articles:


All Articles