jQuery下拉列表 - 编程下降选项

Question

我有一个带有多个选项的选择标签。我有一个用于过滤的搜索框，它根据您键入的文本而隐藏或显示选项。我想在单击它时以相同的方式删除选项，但我想通过编程方式进行操作。我希望有人了解我想说的话。

用换句话说，当用户在搜索文本框中键入某些内容时，我希望下拉元素下属，用户可以在键入时看到搜索结果...

我找到了<ul>和<li>的一些示例，但是我想要<select>和<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();
            }
        });
    });

谢谢！

Answer 1

根据此答案，这将是您可以到达解决方案的最接近：

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

---

示例

Answer 2

您的代码执行您想要的工作，但是您必须从隐藏的所有选项开始：

$("#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('');

因此，没有任何使用选择是因为您无法通过编程方式打开它。我的建议是您选择以下https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/不要试图重塑轮子。