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

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

---

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

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

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

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

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

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

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

장점과 단점

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

장점

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

단점

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

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

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