Mi código:
<input class="form-control" id="myInput" type="text" placeholder="Search.."/> <select autofocus="True" class="form-control form-select select" id="asortyment" name="asortyment"> <option value="493">Berlin</option> <option value="494">Warsaw</option> <option value="495">New York</option> <option value="496">Moscow</option> <option value="497">London</option> <option value="498">Paris</option> <option value="499">Wien</option> </select>guion
$(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); var asortyment_tmp = document.getElementById('asortyment'); $("#asortyment option").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); });Después de escribir cualquier letra, la selección se filtra pero la opción anterior no cambia automáticamente.
Probé casi todo. Seleccionar está cambiando después de configurar el índice seleccionado, pero si lo configuro en 0, el valor cambia a la primera opción, pero antes de que se filtre la lista.
Creo que la mayor confusión es que, por lo general , al configurar selecciones, lo hace por el valor (y aquí usa números para los valores). Aquí está mi enmienda a su código que debería llevarlo por el camino correcto (pero aún necesitará algunas personalizaciones para que sea adecuado para su escenario).
$(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); if(value.length==0){ $('#asortyment').prop('selectedIndex',0); return; } var asortyment_tmp = document.getElementById('asortyment'); $("#asortyment option").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); }); $("#asortyment option").filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1; }).prop('selected', true) }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <select autofocus="True" class="form-control form-select select" id="asortyment" name="asortyment"><option value="493">Berlin</option><option value="494">Warsaw</option><option value="495">New York</option><option value="496">Moscow</option><option value="497">London</option><option value="498">Paris</option><option value="499">Wien</option></select>