My code:
<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>
script
$(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);
});
After typing any letter, select is filtered but the previous option doesn't change automatically.
I tried almost everything. Select is changing after setting selectedIndex but I if I set it to 0 the value change to the first option, but before the list was filtered.
I think the biggest confusion is that typically when setting selects, you do so by the value (and you use numbers for values here). Here is my amendment to your code that should get you on the right track (but will still need some customization to make it right for your scenario).
$(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>