개념 증명 - 대규모 선택을 동적으로 필터링

얼마 전에 한 친구가 흥미로운 문제로 저에게 편지를 보냈습니다. 그는 필드 중 하나에 거의 천 개 정도의 항목이 있을 수 있는 형식을 가지고 있습니다. 사용자의 로드 시간에는 그다지 영향을 미치지 않았지만 사용하기 어려운 드롭다운 컨트롤을 만들었습니다. 그는 사용자가 좀 더 쉽게 읽을 수 있도록 드롭다운을 필터링할 수 있는 방법이 있는지 궁금했습니다. 여기 제가 생각해낸 것이 있습니다.

첫째, 나는 datalist 루트를 내려가지 않았다. 유사한 동작을 제공하지만 문자열 값만 선택할 수 있습니다. 선택 필드를 사용하면 옵션의 값에 바인딩하는 동안 문자열 값을 표시할 수 있습니다. 예를 들어 사용자에게 표시되는 텍스트는 American이고 값은 데이터베이스에서 사용되는 일부 기본 키 값일 수 있습니다.

데이터 목록을 사용하는 대신 드롭다운 옆에 간단한 텍스트 필드를 사용했습니다.

<input type="search" id="filter" placeholder="Filter" autocomplete="off">
<select id="myOptions"></select>

내 JavaScript 코드는 필터에 대한 변경 사항을 수신하고 드롭다운을 채운 데이터의 필터에 적용했습니다. 다음은 전체 코드입니다.

function getOptions() {
    let result = [];
    let prefix = ["A","B","C","D","E","F","G","H","I","J","K"];
    prefix.forEach(p => {
        for(let x=0; x<250; x++) {
            result.push(p+x);
        }
    });
    return result;
}


function setOptions(opts) {
    let select = document.querySelector('#myOptions');

    //set values for drop down
    let html = '';
    opts.forEach(o => {
        html += `<option>${o}</option>`;
    });
    select.innerHTML = html;
}

let filter = document.querySelector('#filter');

filter.addEventListener('input', () => {
    let value = filter.value.trim().toLowerCase();
    let options = (getOptions()).filter(f => {
        return value === '' || f.toLowerCase().includes(value);
    });
    setOptions(options);
},false);

setOptions(getOptions());

따라서 먼저 getOptions는 API 호출 또는 다른 '실제' 프로세스를 나타냅니다. 제 경우에는 더미 데이터를 생성하고 있습니다.

함수setOptions는 드롭다운에 사용할 수 있는 옵션 설정을 처리합니다. 전달된 값의 배열을 기대합니다. 기본적으로 이것은 getOptions 의 전체 결과이지만 필터에 입력하면 반환된 값이 필터링됩니다. 다음은 데모입니다.



나는 이것을 트위터에 공유했고 좋은 반응을 얻었습니다. Markus Oberlehner는 CodePen 포크로 응답하여 흥미로운 작업을 수행했습니다. 필터 필드를 클릭하면 드롭다운의 multiple 속성이 활성화되어 수행 중인 필터에 대한 좀 더 시각적인 피드백을 제공합니다. 여기 그의 버전이 있습니다.



내 CodePen(또는 Markus)을 포크하여 자신의 버전에서 작업할 수 있음을 기억하십시오!