검색 가능한 드롭 다운을 만드는 방법

Question

그래서 bootstrapp를 사용하여 드롭 다운을 만들었습니다.

내가 여기했다 코드 : http://getbootstrap.com/docs/4.0/components/dropdowns/

<div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown button 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
</div> 

지금 나는 사람들이 입력 할 수 있도록 드롭 다운 목록 내부 검색 상자를 추가 할하고 더 적절한 드롭 다운 목록으로 단축됩니다.

많은 방법을 찾고 있는데, 그 중 일부는 Select2와 같은 외부 플러그인을 사용하지만, <select> 및 <option> 태그를 사용하여 드롭 다운을 코딩해야합니다. 반대로, 내 코드는 버튼과 Bootstrapp의 내장 드롭 다운 클래스를 사용합니다.

누구든지 도와주세요.

Answer 1

목록을 정렬하려면 list.js을 사용합니다.

https://jsfiddle.net/o9b17p2d/29/

HTML :

<div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2" id="dropdown-sorted-list"> 
    <ul class="dropdown-menu-list list"> 
     <li> 
     <button class="dropdown-item dropdown-item-name" type="button">Action</button> 
     </li> 
     <li> 
     <button class="dropdown-item dropdown-item-name" type="button">Another action</button> 
     </li> 
    </ul> 
    <input type="text" class="form-control dropdown-item search" placeholder="Filter" aria-label="Filter" aria-describedby="basic-addon1"> 
    </div> 
</div> 

JS : 참조 예를 여기 당신이 필터링 할 수 있습니다 목록이있는 부트 스트랩-4 드롭 다운을 갖는 문제를 해결할 수있는 방법의 예입니다 5 list.js documentation에서 list.js 설정 방법에 대해

$(document).ready(function() { 
    var options = { 
    valueNames: ['dropdown-item-name'] 
    }; 

    var hackerList = new List('dropdown-sorted-list', options); 
}); 

CSS :

.dropdown-menu-list { 
    list-style-type: none; 
    padding-left: 0; 
} 

당신이 Bootstrap 4 documentation for dropdowns에서 읽을 수 있듯이,이 드롭 다운에서 <button> 요소를 사용하는 것이 가능하다.

Answer 2

도움을 주신 데 대해 감사합니다. 해결책을 찾았습니다. 필요하면 누구나 여기에 아픈 게시물을 게시하십시오.

function searchBox() { 
    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"; 

     } 
    } 
}