検索リストボックスのオプションを非表示にする方法は？

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>

Answer 2

チェック各オプションのテキストボックスが変更されるたびに、それはテキストボックス内のテキストで始まっている場合、その後、

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) { 
 
    \t $("#listbox").attr('size', count); 
 
    } 
 
    else { 
 
    \t $("#listbox").attr('size', 2); 
 
    } 
 
    }); 
 
})

textarea, select { 
 
    width: 200px; 
 
    font-size: 20px 
 
}

<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>

に一致しない要素を非表示

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