Datalist를 사용하여 JavaScript 없이 기본 자동 완성

이 기사는 원래 Rails Designer에 게시되었습니다

---

최근에는 기본 자동 완성 기능을 추가해야 했습니다. 사용자는 어떤 키와 값을 사용하여 설정을 추가할 수 있습니다. 하지만 선택할 수 있는 사전 정의된 설정을 만들 수도 있습니다.

위의 gif로도 충분히 설명이 됩니다. 필드에 어떤 값이라도 입력할 수 있지만 미리 정의된 슬러그 키를 선택합니다.

이 내용을 보면 오래된 selectize.js나 최신 버전, 더 가벼운 tom-select와 같은 JavaScript 라이브러리를 선택할 수 있습니다(그리고 더 많은 라이브러리가 있습니다!). 확실히 사용 사례가 있지만 이 경우에는 더 간단한 방법으로 문제를 해결할 수 있을 것 같습니다(적어도 이 제품의 초기 단계에서는).

입력: 데이터 목록. 링크를 보시면 아시겠지만 지원이 꽤 좋습니다!

설정도 매우 간단합니다. 그냥 HTML입니다. 위의 예가 어떻게 수행되는지 살펴보겠습니다.

<form action="#" method="post">
  <input list="settings" type="text">

  <datalist id="settings">
    <option value="slug"></option>
    <option value="description"></option>
    <option value="author"></option>
  </datalist>
</form>

그렇습니다. "자동 완성"을 추가하려는 입력 필드에 데이터 목록 요소의 id와 일치하는 목록 속성을 추가합니다. 그런 다음 데이터 목록에 자동 완성 기능을 표시할 옵션을 추가합니다.

그리고 붐, 이제 끝났습니다! ?

장점과 단점

이제 datalist 사용법을 알았으니 장단점을 아는 것이 중요하므로, 사용할 수 있는지, 사용하고 싶은지 판단할 수 있습니다.

장점

• 최소 코드
• 기본 브라우저 통합 및 기본 키보드 탐색
• 내장된 양식 확인 및 접근성 기능

단점

• 대규모 데이터세트의 성능 문제(기본 JS 비동기 요청으로 수정 가능)
• 플랫폼 간 일관되지 않은 동작
• 스타일링 옵션 없음

이것은 올바르게 사용하면 더 빠르게 배송하는 데 도움이 될 수 있는 HTML 기능 중 하나입니다. 더 많은 스타일링이 필요하거나 특정 시점에 많은 요소 목록이 필요한 경우 언제든지 맞춤형 솔루션을 선택할 수 있습니다.

위 내용은 Datalist를 사용하여 JavaScript 없이 기본 자동 완성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!