[HTML] datalist 태그로만 autocomplete 구현하기

728x90

datalist 태그로만 autocomplete 구현하기

지금까지 autocomplete(자동완성)를 구현하기 위해서는 Javascript을 이용하여 직접 구현하거나 jQuery를 이용하여 autocomplete를 구현하여 사용하고 있었다.

그러나 HTML5에서 datalist라는 태그를 통해서 autocomplete(자동완성)를 쉽게 구현할 수가 있다.

그럼 어떻게 사용하여 구현하면 되는지 알아보도록 하자.

728x90

1. datalist 태그

일단 datalist 태그는 input 태그와 option 태그와 함께 사용된다.

datalist 태그는 다른 컨트롤에 대해 미리 정의된 option 태그를 나타내는 집합을 나타낸다.

일단 datalist 태그에 대한 정보는 아래 링크를 통해서 확인할 수 있다.

HTML Standard

The type attribute controls the behavior of the button when it is activated. It is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second

html.spec.whatwg.org

<datalist> - HTML: Hypertext Markup Language | MDN

HTML <datalist> 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담습니다.

developer.mozilla.org

2. 구현 & 시연

사실 직접 구현해보고 사용된 코드를 보는 편이 훨씬 이해하기 쉽다.

일단 간단하게 아래 코드와 같이 작성해보았다.

# datalist 구현

<label for="fruit">과일 이름은??</label>
<input id="fruit" type="text" list="test-options" />
<datalist id="test-options">
    <option value="apple" />
    <option value="banana" />
    <option value="pear" />
    <option value="grape" />
    <option value="orange" />
    <option value="strawberry" />
    <option value="kiwi" />
    <option value="apricot" />
    <option value="raspberry" />
</datalist>

일단 코드를 보면 input 태그에서 list 옵션 값과 datalist 태그의 id 값이 동일해야 한다.

그리고 datalist 태그 하위에 option 태그를 이용해서 사용할 값을 입력해 주도록 하자.

그럼 테스트로 한번 확인해보도록 하자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Datalist Tag Test</title>
</head>
<body>
<label>Datalist Tag Test</label>
<label for="fruit">과일 이름은??</label>
<input id="fruit" type="text" list="test-options" />
<datalist id="test-options">
    <option value="apple" />
    <option value="banana" />
    <option value="pear" />
    <option value="grape" />
    <option value="orange" />
    <option value="strawberry" />
    <option value="kiwi" />
    <option value="apricot" />
    <option value="raspberry" />
</datalist>
</body>
</html>

Datalist Tag Test Datalist Tag Test
과일 이름은??

이제 테스트로 작성한 코드를 보면 자동 완성이 정상적으로 되는 것을 볼 수 있다.

자릿수에 상관없이 중복으로 들어간 단어가 있으면 같이 출력해주며, 중간에 속한 단어가 일치하면 같이 출력해 주는 것을 볼 수 있다.

별다른 구현 없이 해당 부분은 브라우저 직접 태그 내용을 보고 처리를 해주는 것이다.

그럼에 따라서 브라우저에서 지원 여부가 중요한데 다행히도 해당 태그는 모든 브라우저 / 모바일 브라우저에서 작동이 정상적으로 된다.

https://caniuse.com/datalist

Datalist element | Can I use... Support tables for HTML5, CSS3, etc

While most commonly used on text fields, datalists can also be used on other input types. IE11 supports the element on range fields. Chrome and Opera also support datalists to suggest given values on range, color and date/time fields.

caniuse.com

다만 브라우저마다 약간의 특성이 있어서 UI적으로 표현되는 부분은 틀릴 수 있다.

지금은 기능 구현에 대해서만 설명하는 부분이며, 해당 부분은 추후 CSS 등을 통해서 처리가 가능하다.

이처럼 간단한 방법으로 autocomplete(자동완성)를 구현이 되는 걸 알아보았다.

datalist라는 태그를 알게 되어서 점점 활용도가 많지 않을까 생각된다.

728x90