如何隐藏搜索列表框中的选项?

时间:2017-11-03 17:44:40

标签: javascript html css

所以我试图隐藏列表中的选项,以便它们只显示为人物类型。我已经尝试使用谷歌搜索并查看本网站上的其他问题,但我还没有找到我想要的答案。

                   
  • Adele的
  •          
  • 艾格尼丝
  •          
  • 比利
  •          
  • 鲍勃
  •          
  • 卡尔文
  •          
  • 克里斯蒂娜
  •          
  • 辛迪
  •                 
     <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>
    

    2 个答案:

    答案 0 :(得分: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>

    答案 1 :(得分:0)

    检查每个选项,如果文本框中的文本以文本框中的文本开头,则隐藏不匹配的元素

    &#13;
    &#13;
    var text='';
    var count=0;
    $(function() {
      $("#searchbox").keyup(function() {
        count=0;
        text=$(this).val().toLowerCase();
        $("#listbox > option").each(function() {
            if($(this).text().toLowerCase().startsWith(text) && text != "") {
              count++;
              $(this).css("display","block");
            }
            else {
              $(this).css("display","none");
            }
        });
    
        if(count > 0) {
          $("#listbox").css("display","block");
        }
        else {
          $("#listbox").css("display","none");
        }
    
        if(count > 1) {
        	$("#listbox").attr('size', count);
        }
        else {
        	$("#listbox").attr('size', 2);
        }
      });
    })
    &#13;
    textarea, select {
      width: 200px;
      font-size: 20px
    }
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <textarea id="searchbox"></textarea>
    <br>
    <select id="listbox" style="display: none" name="listbox" size="5">
      <option style="display: none">Ad</option>
      <option style="display: none">Ab</option>
      <option style="display: none">Bi</option>
      <option style="display: none">Bo</option>
      <option style="display: none">Ca</option>
      <option style="display: none">Co</option>
    </select>
    &#13;
    &#13;
    &#13;

    jsfiddle:http://jsfiddle.net/2ypx1yyy/5/