검색 목록 상자에서 옵션을 숨기는 방법은 무엇입니까?

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/