제안 목록이 있는 제어 입력

자동 완성 구성 요소는 두 가지 주요 부분으로 이루어집니다. 제어되는 텍스트 입력과 드롭다운 제안 목록입니다. 입력은 일반 문서 흐름에 배치되고, 드롭다운은 입력 바로 아래에 절대 위치로 배치됩니다. 두 요소는 서로 다른 DOM 요소이지만 함께 하나의 상호작용 위젯으로 작동합니다.

네 개의 상태 변수가 필요합니다. inputValue(문자열 — 입력된 내용), suggestions(배열 — 현재 일치하는 항목), isOpen(불리언 — 드롭다운이 표시되는지 여부), selectedIndex(숫자 — 키보드 탐색에서 강조 표시되는 제안 항목의 인덱스이며, 선택 항목이 없으면 -1로 시작)입니다.

입력을 완전히 제어되는 상태로 만드십시오: value={inputValue} 및 onChange={e => setInputValue(e.target.value)}. 이렇게 하면 표시되는 텍스트를 리액트가 완전히 제어할 수 있습니다. 키를 입력할 때마다 상태가 업데이트되고, 새 값으로 다시 렌더링됩니다. 자동 완성에는 비제어 입력을 사용하지 마십시오. 값을 프로그래밍 방식으로 읽고 설정해야 하기 때문입니다.

제안 항목이 로컬 배열에서 제공되는 경우 inputValue를 기준으로 렌더링할 때마다 필터링하십시오. 각 항목을 item.toLowerCase().includes(inputValue.toLowerCase())로 비교합니다. 목록이 크다면 useMemo로 계산하여 다시 렌더링할 때마다 재계산하지 않도록 할 수 있습니다. 작은 목록에서는 인라인 필터링으로 충분합니다.

inputValue.length > 0이고 suggestions.length > 0일 때 드롭다운을 여십시오. 입력이 포커스를 잃을 때는 제안 항목 클릭이 먼저 처리될 수 있도록 약간 지연한 후 닫고, 제안 항목이 선택되거나 이스케이프 키를 누를 때도 닫습니다. 조건부 렌더링을 제어하도록 isOpen을 그에 맞게 설정하십시오.

입력이 포커스를 잃으면 onBlur 이벤트가 발생하며, 사용자가 제안 항목을 클릭할 때도 포커스를 잃습니다. 포커스 상실 직후 드롭다운을 닫으면 클릭 이벤트가 발생하기 전에 드롭다운이 사라져 제안 항목 클릭이 처리되지 않습니다. 클릭이 처리될 시간을 주려면 setTimeout(() => setIsOpen(false), 150)을 사용하십시오.

position: absolute를 사용하여 드롭다운을 배치하면 입력 아래의 콘텐츠를 밀어 내지 않고 그 위에 표시할 수 있습니다. 높은 z-index(100 이상)를 설정하여 다른 콘텐츠 위에 표시되도록 하십시오. 결과가 많을 때 목록이 지나치게 길어지지 않도록 max-height와 overflow-y: auto를 설정하십시오.

각 제안 항목에는 onClick 처리기가 있어야 합니다: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. 이렇게 하면 입력이 선택한 제안 항목으로 설정되고 드롭다운이 닫힙니다. 선택이 즉시 자연스럽게 적용되어 사용자가 자동 완성 필드에서 기대하는 동작과 일치합니다.

포커스 상실 시간 초과의 대안으로 각 제안 항목에 onMouseDown={e => e.preventDefault()}를 사용할 수 있습니다. 이렇게 하면 마우스를 누르는 동작이 입력에서 포커스를 빼앗지 않으므로 제안 항목을 클릭할 때 포커스 상실 이벤트가 발생하지 않습니다. 입력은 포커스를 유지하고 클릭 처리기가 정상적으로 실행됩니다.

좋은 자동 완성 기능은 키보드로 탐색할 수 있어야 합니다. 사용자는 ArrowDown을 눌러 첫 번째 제안 항목을 강조하고, 계속 눌러 목록 아래로 이동하며, 엔터를 눌러 선택하고, 이스케이프를 눌러 선택하지 않은 채 닫을 수 있어야 합니다. 이는 입력 요소의 onKeyDown을 처리하여 구현합니다.

사용자가 입력하여 inputValue가 변경될 때마다 selectedIndex를 -1로 재설정하십시오. 이렇게 하면 이전 키보드 선택이 지워져 새로 필터링된 제안 목록에서 아무것도 강조되지 않은 상태로 시작합니다. 목록이 변경된 후에도 다른 항목을 가리키는 오래된 선택 인덱스가 남아 있으면 혼란스럽고 올바르지 않습니다.

포커스 상실 시간 초과에 의존하는 대신 제안 항목에서 onMouseDown과 e.preventDefault()를 사용하는 이유는 무엇입니까?

자동 완성 위젯에는 네 개의 상태 변수가 필요합니다: inputValue, suggestions, isOpen, selectedIndex입니다. 제어되는 입력을 사용하고, 입력을 기준으로 제안 항목을 필터링하며, isOpen을 통해 드롭다운 표시 여부를 관리하십시오. 포커스 상실 후 클릭이 처리되지 않는 경쟁 상태는 시간 초과 또는 onMouseDown과 preventDefault 중 하나로 처리하십시오. 입력이 변경될 때마다 selectedIndex를 재설정하십시오.