JavaScript 자동 완성

지금 우리는 자동 완성을 구현할 것입니다. 이 용어는 입력란에 텍스트를 입력할 때 나타나는 드롭다운 힌트를 의미합니다. 예제를 통해 살펴봅시다. 아래에 국가 이름을 입력할 수 있는 입력란을 만들었습니다. 이때, 어떤 글자를 입력하면 입력한 문자열로 시작하는 국가 목록이 입력란 아래에 나타납니다.

원한다면, 국가 이름 전체를 입력하지 않고 마우스로 어떤 국가를 클릭하면 해당 국가가 입력란에 나타나게 할 수 있습니다. 일반적으로 자동 완성이 필요한 이유가 바로 이것입니다. 예제를 간단히 하기 위해 세 개의 국가만 만들었습니다: Belarus, Belgium 그리고 Bulgaria. 아래 제공된 입력란에 먼저 영어 'B'를 입력하고, 그 다음 'e'를 입력하고 어떤 일이 발생하는지 보세요:

논의

문제를 어떻게 해결할지 논의해 봅시다. 국가 이름이 담긴 배열을 만들어야 합니다. 제 배열은 다음과 같습니다:

let arr = ['Belarus', 'Belgium', 'Bulgaria'];

입력란에 텍스트를 입력할 때, 각 문자를 입력할 때마다 국가 배열을 검색하고 입력된 문자열로 시작하는 국가를 얻어야 합니다. 이는 filter 와 startsWith 메서드를 사용하면 편리합니다.

filter를 사용하여 입력된 문자열로 시작하는 국가 배열을 얻을 수 있습니다. 그런 다음 이 배열을 루프로 순회하고 국가가 담긴 리스트 아이템으로 ul 목록을 채워야 합니다. 그리고 이전에 생성된 리스트 아이템을 먼저 제거한 후 모든 문자 입력에 대해 이 작업을 수행해야 합니다.

여러분의 편의를 위해 완성된 마크업을 제공합니다:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
text text text text text

#parent {
	position: relative;
}
#elem {
	padding: 5px;
	font-size: 18px;
}

#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}
#parent li {
	border: 1px solid gray;
	font-size: 18px;
	padding: 5px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

위의 HTML과 CSS 코드를 복사하세요. 설명된 알고리즘에 따라 자동 완성을 구현하세요.