jQuery Dropdown - drop down options programmatically

Question

I have a select tag with multiple options. I have a search box for filtering, which hides or shows options depending on what text you type. I want to drop down options the same way it works when I click on it, but I want to do it programmatically. I hope someone understands what I am trying to say.

with other words, while the user is typing something in the search textbox, I want my dropdown element to drop down, the user will be able to see search results while typing...

I have found some examples with <ul> and <li>, but I want with <select> and <option>.

HTML

<select id="select_street">
    <option value="1">Street 1</option>
    <option value="2">Street 2</option>
    <option value="3">Street 3</option>
    <option value="4">Street 4</option>
</select>
<input type="text" id="search_filter" />

Javascript/jQuery

$("#search_filter").on('keyup', function (e) {
        $("#select_street option").each(function () {
            if ($(this).html().toLowerCase().includes($.trim($('#search_filter').val()).toLowerCase())) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });

Thanks!

Possible duplicate of [How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?](http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) — empiric, Dec 02 '16 at 17:28
maybe, but with focus() on select, user will not be able to still type in search textbox.. — serban.b, Dec 03 '16 at 07:56

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

According to this answer this would be the nearest you can get to a solution:

$("#search_filter").on('keyup', function(e) {
  $("#select_street").attr('size', $("#select_street option").length);
  //...
});

Example

edited May 23 '17 at 12:30

Community

1
1

answered Dec 02 '16 at 17:27

empiric

7,825
7
37
48

and I will apply some fade effects..would be nice. thanks! – serban.b Dec 02 '16 at 19:51

score 1 · Answer 2 · answered Dec 02 '16 at 17:34

Your code does what you want, however you have to start with all options hidden like this:

$("#search_filter").on('keyup', function (e) {
    $("#select_street option").each(function () {
        if ($('#search_filter').val() == '') {
            $('#select_street option').hide();
            $('#select_street').val('');
            return;
        }
        if ($(this).html().toLowerCase().includes($.trim($('#search_filter').val()).toLowerCase())) {
            $(this).show();
            if ($('#select_street').val() == '') {
                $('#select_street').val($('#select_street option:first').val());
            }
        } else {
            $(this).hide();
            if ($(this).is(':selected')) {
                $('#select_street').val('');
            }
        }
    });
});
$('#select_street option').hide();
$('#select_street').val('');

There reason noone uses select is because you can't open it programatically. My advice is you pick one of these https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ don't try to reinvent the wheel.

well...if I knew that before...thanks! I have work to do know :) — serban.b, Dec 02 '16 at 19:53

jQuery Dropdown - drop down options programmatically

2 Answers2