javascript - 如何隐藏搜索列表框中的选项？

Question

所以我试图隐藏列表中的选项，以便它们仅在用户键入时显示。我试过用谷歌搜索它并检查这个网站上的其他问题，但我没有找到我正在寻找的答案。

阿黛尔

艾格尼丝

比利

鲍勃

卡尔文

克里斯蒂娜

辛迪

 <script>
 function myFunction() {
              var input, filter, ul, li, a, i;
              input = document.getElementById("myInput");
              filter = input.value.toUpperCase();
              ul = document.getElementById("myUL");
                li = ul.getElementsByTagName("li");
                 for (i = 0; i < li.length; i++) {
                   a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                           li[i].style.display = "";
                  } else {
                       li[i].style.display = "none";

                                        }
                                    }
                                }
  </script>

Answer 1

如果你不是在寻找自动完成那么我认为 Select2可以帮助。检查这个 example .

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>

<select class="js-example-basic-single" name="state" style='width: 150px'>
  <option value="">--Select--</option>
  <option value="BR">Britain</option>
  <option value="CA">California</option>
  <option value="DEL">Delhi</option>
  <option value="FL">Florida</option>
  <option value="HK">Hong Kong</option>
  <option value="LND">London</option>
  <option value="MAC">Macau</option>
</select>