Wie wird das Dropdown-Feld angezeigt, wenn im Textfeld ein Text eingegeben wird

Gibt es einen Klick-Listener für das select-Tag? Wie trigger ich das select-Tag und zeige die Dropdown-Box? Gefällt Ihnen dieses here Wie wird das Dropdown-Feld angezeigt, wenn im Textfeld ein Text eingegeben wird

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>

Quelle

2017-08-19 Richard

Sie mögen unten tun können: -

$(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>

Hinweis: - Sie können uns e Drittanbieter-Plugin wie unten

editable-select

Arbeitsbeispiel: -

$(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>

Quelle

2017-08-19 19:20:06

Sorry, ich die Drop-down-Fenster für die Optionsliste bedeuten. nicht die Box selbst – Richard

, so dass Sie Dropdown-Menü öffnen möchten, wenn ein beliebiges Zeichen in Text-Box schreiben? –

ja, bitte helfe – Richard

Sie können nicht wirklich, dass mit einem selctbox. Eine Abhilfe wäre die selectbox Größe auf eine Zahl größer als 0 eingestellt Sie können diese erweitern, die genaue Höhe der Auswahlbox zu erhalten (= Anzahl der Optionen) und legen Sie es als Attribut Größe:

$(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>

Quelle

2017-08-19 19:48:27

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

die jQuery-Plugin funktioniert für mich

Quelle

2017-08-19 20:39:01 Richard