바닐라 js의 검색 가능한 목록 모달 구성 요소입니다.

당신에게 평화가 있기를 - السلام عليكم

이유

나는 약 22k에서 52k 크기의 데이터를 검색하기 위해 드롭다운을 사용하고 있었는데, 한 번에 22k 목록 항목을 렌더링하면서 드롭다운이 중단되었습니다.

그래서 Trading View's Search 과 같은 사용자 지정 검색 가능 목록을 만들고 싶었습니다. 입력을 클릭하면 모달이 나타나고 데이터를 검색할 수 있으며 검색된 값을 클릭하면 초기 입력에 나타납니다.

단계들

입력을 만듭니다.

모달을 만듭니다.

모달 표시 이벤트를 입력에 바인딩합니다.

검색 입력을 만듭니다.

목록 요소를 만듭니다.

목록을 채웁니다.

리스너를 목록의 요소에 바인딩합니다.

검색 기능을 검색 입력 및 목록에 바인딩합니다.

사용된 기술

부트스트랩 4

바닐라제이에스

제이쿼리

구현

첫째: 간단한 입력 요소를 만들고 고유 ID를 지정합니다.

이 입력은 선택기 모달을 열고 모달에서 선택한 값을 표시하는 데 사용됩니다.

<input type="text" class="form-control" placeholder="Select Item From List" id="searchModalOpener">

두 번째: 모달을 만들고 고유한 ID를 부여합니다.

<div class="modal " id="searchModalOpener-modal" data-backdrop="static">
    <div class="modal-dialog modal-lg" style="height: 600px">
        <div class="modal-content h-100 rounded-4">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body"> </div>
        </div>
    </div>
</div>

참고: 모달을 본문에 직접 자식으로 추가하거나 본문에 직접 자식인 div 내부에 추가합니다.

셋째: 입력을 클릭하면 모달을 열도록 쇼 이벤트를 바인딩합니다.

document.getElementById("searchModalOpener").onclick = () => { 
    $(`searchModalOpener-modal`).modal("show"); 
}

네 번째 및 다섯 번째: 모달 본문에 검색 입력 및 목록(고유 ID 포함) 추가

<div class="modal-body">
    <input type="text" class="form-control" style="text-align: center" placeholder="Search Symbol" id="searchModalOpener-search">
    <div id="searchModalOpener-list" style="height: 400px" class="overflow-auto pb-5"></div>
</div>

여섯 번째: 데이터로 목록 채우기

이를 달성하는 데는 수십 가지 방법이 있을 수 있으며 내 방법이 최고가 아닐 수 있으므로 여기에서 창의력을 발휘할 수 있습니다. 저는 데이터 배열을 반복하고 각 반복에서 p 요소를 만들고 스타일을 지정하고 텍스트 값을 추가하고 이벤트를 첨부합니다. 리스너를 클릭하면 값이 초기 입력 요소에 설정되고 마지막으로 목록 요소에 추가됩니다.

//data: string[] = ["1", "2", "3"];

let list = document.querySelector(`#searchModalOpener-list`);

const addItemToList = (val) => {

    let tag = document.createElement("p");
    tag.id = "p-symbol"
    tag.classList.add(...["my-2", "border-bottom", "py-1"])
    let text = document.createTextNode(val);
    tag.appendChild(text);
    list.appendChild(tag);

}

function populateList() {

    data.forEach((val, index) => {
        addItemToList(val);
    });
}


//Call populateList Method when you are opening the modal, i.e bind it to the shown event of modal

//Above code becomes

$(`searchModalOpener-modal`).on('show.bs.modal', function() {
    listPopulate();
}).modal("show");

일곱: 목록 항목에 리스너 추가

// Create a function and bind it to p tag before appending it to the list

let firstInput = document.querySelector("#searchModalOpener");

cost itemOnClick = (val) => {
    firstInput.setAttribute("value", val);

}

// Add this next line in addItemToList Function just before appending it

tag.onclick = () => itemOnClick(val);

8: 검색 기능을 검색 표시줄에 바인딩합니다.

const searchBar = document.querySelector(`#searchModalOpener-search`);

searchBar.addEventListener('input', function(e) {
  const query = e.target.value;
  if (query.length > 0) {
    list.innerHTML = ``;

    const filteredList = data.filter(val => val.trim().startsWith(query.toUpperCase()));

    filteredList.forEach((val, index) => {
      addItemToList(val);
    });

}

퍼프! 모두 끝났으니 무엇이든 물어보세요. 감사.

추신: Joel의 의견에 따르면 이제 Vanilla JS를 사용하는 것이 좋습니다. jquery를 사용하는 이유는 모달 이벤트에만 해당되며 문서 방법으로 실행되지 않았습니다.

행복한 코딩 👋🏻