HTML5 데이터리스트를 사용한 경량 자동 완성 제어-CSS 튜토리얼-php.cn

`, `` is more practical for handling a large number of options and allows users to enter custom values not listed in the predefined options.

HTML5 Datalist 옵션을 어떻게 스타일링 할 수 있습니까?

예, HTML5 데이터리스트와 함께 JavaScript를 사용할 수 있습니다. 옵션을 제거하거나 변경합니다. 그러나 Datalist는 OnChange 또는 OnClick과 같은 이벤트를 지원하지 않습니다. 이벤트 리스너를 대신 관련 입력 필드에 추가해야합니다.

집

웹 프론트엔드

CSS 튜토리얼

HTML5 데이터리스트를 사용한 경량 자동 완성 제어

Jennifer Aniston

Feb 10, 2025 pm 03:18 PM

HTML5 데이터리스트를 사용한 경량 자동 완성 제어 이 튜토리얼에서는 html5 요소에 대해 깊은 곳을 살펴 보겠습니다. JavaScript가 필요하지 않은 가볍고 접근 가능한 크로스 브라우저 자동 완성 양식 컨트롤을 구현할 수 있습니다. 키 테이크 아웃

html5`

`요소는 JavaScript에 의존하지 않고 자동 완성 양식 컨트롤을위한 경량, 접근성 및 크로스 브라우저 솔루션을 제공합니다.

Unlike `

`, `` is more practical for handling a large number of options and allows users to enter custom values not listed in the predefined options.

브라우저 지원`

`에 대한 브라우저 지원은 Internet Explorer 10 및 11을 포함한 최신 브라우저에서 강력하며``와 텍스트 입력의 조합을 사용하여 이전 브라우저에서 폴백 옵션을 사용할 수 있습니다. 🎜> ``요소는 CSS와 직접 스타일을 지정할 수 없으므로 사용자 정의를 제한하지만 다른 브라우저와 플랫폼에서 일관성을 보장합니다. 와 같은 향상된 개선 사항은 사용자 입력을 기반으로 옵션을 동적으로 채우고 실시간 데이터 피드백이 필요한 응용 프로그램의 기능 개선 및 사용자 경험을 동적으로 채우기 위해``와 통합 될 수 있습니다.

컨트롤은 사용자가 작은 범위의 옵션 중에서 선택할 수 있도록 이상적입니다.

국가 또는 직책과 같은 많은 옵션이 있습니다. 사용자는 목록에없는 자신의 옵션을 입력하려고합니다. .

Datalist의 ID는 필드의 목록 속성으로 참조 할 수 있습니다.

혼란스럽게도 AutoComplete = "Off"를 설정하는 것이 가장 좋습니다. 이를 통해 에 값이 표시되지만 브라우저에 이전에 입력 한 값은 아닙니다. 결과 :

HTML5 데이터리스트를 사용한 경량 자동 완성 제어 이것은 Microsoft Edge의 기본 렌더링입니다. 다른 응용 프로그램은 유사한 기능을 구현하지만 모양은 플랫폼과 브라우저마다 다릅니다. 옵션 의 텍스트 자식으로 레이블을 사용하는 것이 일반적입니다.

값 속성을 사용하면 동일한 결과가 발생합니다

참고 : Closing /> 슬래시는 html5에서 선택 사항이지만 코딩 오류를 방지 할 수 있습니다. . 다음 형식 중 하나를 사용하여 선택한 레이블에 따라 값을 설정할 수도 있습니다. 옵션 1 :

옵션 2 :

두 경우 모두 유효한 옵션을 선택할 때 입력 필드가 1, 2 또는 3으로 설정되지만 UI는 브라우저에 따라 다릅니다.

Chrome은 값과 레이블이 모두있는 목록을 보여줍니다. 옵션이 선택되면 값 만 남아 있습니다.

Firefox는 레이블 만있는 목록을 보여줍니다. 옵션이 선택되면 값으로 전환됩니다.

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

로그인 후 복사

가장자리는 값 만 보여줍니다

다음 코드 펜 예제는 모든 변형을 보여줍니다 : 펜을 참조하십시오. html5 sitepoint (@sitepoint) > 코드 펜에서 자동 완성 예제를 참조하십시오.

구현은 발전 할 것이지만, 현재로서는 사용자를 혼동하기 때문에 값과 레이블을 사용하지 않는 것이 좋습니다. (해결 방법은 아래에서 논의됩니다.) 브라우저 지원 및 폴백

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

로그인 후 복사

요소는 현대식 브라우저와 Internet Explorer 10 및 11에서 잘 지원됩니다.

몇 가지 구현 노트가 있지만 대부분의 사용에 영향을 미치지 않습니다. 일어날 수있는 최악의 상황은 필드가 표준 텍스트 입력으로 되돌아갑니다.

IE9 이하를 절대적으로 지원 해야하는 경우 가 실패 할 때 텍스트 입력과 함께 표준 및 텍스트 입력 필드 모두 활성화 :

두 값 모두 기존 IES에서 입력 할 수 있습니다. 귀하의 신청서는 다음과 같습니다.

가장 유효한 사람을 결정하십시오 작은 JavaScript 함수를 사용하여 다른 하나가 변경 될 때 하나를 재설정하십시오.

비 텍스트 컨트롤에서 를 사용하는 값을 다음과 같이 적용 할 수도 있습니다 "날짜"유형의 입력. 사용자는 YYYY-MM-DD 값으로 정의 된 다양한 옵션 중에서 선택할 수 있지만 로케일 형식으로 제시됩니다.

"색상"유형의 입력. 사용자는 6 자리 16 진수 값으로 정의 된 다양한 색상 옵션 중에서 선택할 수 있습니다 (3 자리 값은 작동하지 않음).

"범위"유형의 입력. 슬라이더는 진드기 표시를 표시하지만, 입력 할 수있는 값을 제한하지는 않지만. HTML5 데이터리스트를 사용한 경량 자동 완성 제어

Codepen에서 sitepoint (@sitepoint) 에 의해 다른 입력 유형에서

html5 를 참조하십시오.

css 스타일링 스타일링을 고군분투했다면 는 정상적으로 스타일을 지정할 수 있지만 링크 된 와 그 자식은 CSS에서는 스타일을 지정할 수 없습니다. 목록 렌더링은 플랫폼과 브라우저에 의해 전적으로 결정됩니다. 이 상황이 향상되기를 바랍니다. 그러나 현재로서는 다음과 같은 MDN에서 솔루션이 제안됩니다.

기본 브라우저 동작을 재정의합니다 는 를
처럼 효과적으로 취급하여 CSS 에서 스타일링 할 수 있습니다. 는 모든 자동 완성 기능을 JavaScript 에서 복제합니다
더 향상되었으며 코드는 Github에서 사용할 수 있습니다. 이를 사용하려면 HTML 페이지의 어디에서나 스크립트를 ES6 모듈로로드하십시오. JSDELIVR CDN URL을 사용할 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
<datalist id="countrydata">
 <option>Afghanistan</option>
 <option>Åland Islands</option>
 <option>Albania</option>
 <option>Algeria</option>
 <option>American Samoa</option>
 <option>Andorra</option>
 <option>Angola</option>
 <option>Anguilla</option>
 <option>Antarctica</option>
 ...etc...
</datalist>

로그인 후 복사
로그인 후 복사
로그인 후 복사
또는 번들러를 사용하는 경우 NPM으로 설치할 수 있습니다.
요소는 value 옵션> 형식을 사용해야합니다. 예를 들면 :

1
2
3
4
5
6
7
8
<label for="country">country</label>

<input type="text"
 list="countrydata"
 id="country" name="country"
 size="50"
 autocomplete="off" />

로그인 후 복사
로그인 후 복사
참고 : 는 사용할 수 없습니다. CSS를 추가하여 및 요소를 스타일링 할 수 있습니다. 예를 들면 :

1
2
3
4
5
6
<datalist id="mylist">
 <option>label one</option>
 <option>label two</option>
 <option>label three</option>
</datalist>

로그인 후 복사
로그인 후 복사
예 : html5 sitepoint (@sitepoint)에 의한 자동 완성 된 CSS 스타일 (@sitepoint) 참조. 스타일링이 작동하지만 노력할 가치가 있습니까? 나는… 합리적인 접근성으로 브라우저의 표준 키보드, 마우스 및 터치 컨트롤을 다시 구현하는 것은 어렵습니다. MDN 예제는 키보드 이벤트를 지원하지 않으며 이벤트를 개선하려고 시도했지만 일부 장치에는 필연적으로 문제가 발생합니다.
. CSS 문제를 해결하기 위해 200 줄의 JavaScript에 의존하고 있습니다. 1.5KB로 최소화되지만 같은 페이지에 많은 긴 요소가 필요한 경우 성능 문제를 도입 할 수 있습니다. JavaScript가 요구 사항이라면 더 예쁘고 일관된 전투 테스트 JavaScript 구성 요소를 사용하는 것이 바람직합니까?
컨트롤은 JavaScript가 실패 할 때 스타일링없이 표준 HTML5 로 돌아갑니다. 그러나 그것은 사소한 이점입니다. . ajax-eenhanced 생성 디자이너가 브라우저 스타일 차이를 받아들이는 것을 기쁘게 생각하며 JavaScript를 사용하여 표준 기능을 향상시킬 수 있습니다. 예를 들면 :
1
2
3
4
5
6
<datalist id="mylist">
 <option value="label one" />
 <option value="label two" />
 <option value="label three" />
</datalist>

로그인 후 복사

에서 알려진 값 만 받아들이는 선택적 유효성 검증 구현. >> ajax 호출에 의해 반환 된 데이터의 요소를 검색 API에 반환합니다. 옵션을 선택할 때 다른 필드 값을 설정하십시오. 예를 들어,“미국”을 선택하면 숨겨진 입력에서“미국”을 설정합니다.
코드는 주로 요소를 재정의해야하지만 몇 가지 코딩 고려 사항이 있지만
AJAX API 요청은 최소 수의 문자 수를 입력 한 후에 만 발생해야합니다. 타이핑 이벤트는
Defounce 이어야합니다. 즉, Ajax 호출은 사용자가 적어도 0.5 초 동안 입력을 중지 한 후에 만 트리거됩니다.
쿼리 결과는 동일한 통화를 반복하거나 구문 분석 할 필요가 없으므로 쿼리 결과를 캐시해야합니다.
불필요한 쿼리를 피해야합니다. 예를 들어, "un"에 입력하면 12 개국이 반환됩니다. 모든 결과 옵션이 원래 12 결과에 포함되어 있기 때문에 "init " 또는 에 대한 추가 Ajax 요청을 할 필요가 없습니다.
.
이를위한 표준 웹 구성 요소를 만들었고 코드는 GitHub에서 사용할 수 있습니다. 아래 코드 펜 예제를 사용하면 최소한 두 문자를 입력 한 후 유효한 국가를 선택할 수 있습니다. 음악가 AutoComplete는 그 나라에서 시작된 아티스트를 검색 문자열과 일치시키는 이름으로 반환합니다. Codepen에서 sitepoint (@sitepoint) html5 를 참조하십시오. Country Lookup API는 RestCountries.eu 음악 아티스트 룩업 API는 MusicBrainz.org에 의해 제공됩니다 자신의 응용 프로그램에서 사용하려면 HTML 페이지의 어디서나 스크립트를 ES6 모듈로로드하십시오. JSDELIVR CDN URL을 사용할 수 있습니다 또는 번들러를 사용하는 경우 NPM으로 설치할 수 있습니다. 데이터 입력 필드로 사용하려면 요소를 자식 와 함께 만듭니다. 예를 들어, 국가 조회는 이것을 사용합니다 요소 속성 : 속성 설명 API 나머지 API URL (필수) 결과 데이터 반환 된 API JSON에 객체의 결과 배열이 포함 된 속성의 이름 (결과 만 반환되는 경우 필요하지 않음) 결과 이름 검색 입력과 일치하고 Datalist 요소에 사용되는 각 결과 객체의 속성 이름 (필수) 쿼리 민 검색을 시작하기 전에 입력 할 최소 문자 수가 트리거됩니다 (기본값 : 1) inputDelay 검색이 발생하기 전에 키 프레스 사이에 밀리 초로 대기하는 최소 시간 (기본 분쟁 : 300) 옵션 max 표시 할 자동 완성 옵션의 최대 수 (기본값 : 20) 유효한 설정된 경우이 오류 메시지가 잘못된 값을 선택하면 표시됩니다. 나머지 URL에는 하나 이상의 $ {id} 식별자가 포함되어야하며, 이는 해당 ID와 함께 에 설정된 값으로 대체됩니다. 위의 예에서, API URL의 $ {country}는 "Country"의 ID가있는 Child의 값을 참조합니다. URL은 일반적으로 하위 입력을 사용하지만 페이지의 다른 필드를 참조 할 수 있습니다. restcountries.eu API는 국가 데이터를 포함하는 단일 객체 또는 배열을 반환합니다. 예를 들면 : resultData 속성은 반환 된 유일한 데이터이므로 (래퍼 객체가 없음) 설정할 필요가 없습니다. 해당 속성은 데이터 요소를 채우는 데 사용되기 때문에 결과name 속성은 "이름"으로 설정되어야합니다. 옵션을 선택하면 다른 필드를 자동으로 채울 수 있습니다. 다음 입력은 Data-Autofill 속성이 설정 되었기 때문에 "alpha2code"및 "region"속성 데이터를 수신합니다.
Datalist-Ajax가 작동하는 방법 230 줄의 코드를 읽지 않고 마법을 살아 있으면이 섹션을 건너 뛸 수 있습니다! 코드는 처음에 내에 새로운 를 생성하며, 이는 목록 속성을 사용하여 에 첨부됩니다. 입력 이벤트 핸들러는 을 모니터링하고 최소 수의 문자 수를 입력하고 사용자가 여전히 입력하지 않을 때 runquery () 함수를 호출합니다. RunQuery ()는 양식의 데이터에서 API URL을 빌드하고 Fetch API를 사용하여 Ajax 호출을합니다. 반환 된 JSON은 구문 분석 한 다음 요소를 포함하는 재사용 가능한 DOM 조각이 구성되어 캐시에 배치됩니다. 를 적절한 캐시 된 DOM 조각으로 업데이트합니다. Query가 이미 캐시되었거나 이전 쿼리를 사용할 수있는 경우 runquery ()에 대한 추가 호출 Ajax 통화를 피하십시오. 변경 이벤트 핸들러는 또한 를 모니터링하며, 이는 필드에서 초점이 이동하고 값이 수정 될 때 트리거됩니다. 함수는 값이 알려진 옵션과 일치하는지 확인하고 필요한 경우 제한 조건 유효성 검사 API를 사용하여 유효한 속성에 제공된 오류 메시지를 표시합니다. 유효한 옵션이 선택되었다고 가정하면 변경 처리기 기능은 모든 필드를 일치하는 Data-AutoFill 속성으로 채워집니다. 자동 충전 필드에 대한 참조가 유지되므로 유효하지 않은 옵션이 입력되면 재설정 할 수 있습니다. 그림자 dom은

가 사용되지 않았다는 점에 유의하십시오. 이를 통해 자동 완성 (및 ) 요소가 CSS에 의해 스타일을 지정하고 필요한 경우 다른 스크립트에서 액세스 할 수 있습니다. Dunkin '
html5 에는 한계가 있지만 간단한 프레임 워크-비기능 자동 완성 필드가 필요한 경우 이상적입니다. CSS 지원 부족은 부끄러운 일이지만 브라우저 공급 업체는 결국 그 감독을 해결할 수 있습니다. 이 튜토리얼에 표시된 모든 코드 및 예제는 자신의 프로젝트에 채택 할 수 있습니다. HTML5 Datalist를 사용한 경량 자동 완성 컨트롤에 대한 <about> FAQ <h> html5 데이터리스트 요소가 무엇이며 어떻게 작동합니까? </h></about>

HTML5 Datalist 요소는 입력 요소에 대한 사전 정의 된 옵션 목록입니다. 양식 요소에 "자동 완성"기능을 제공합니다. Datalist 요소는 ID 속성을 사용하여 특정 입력 요소와 연결합니다. 입력 요소는 목록 속성을 사용하여 데이터리스트를 식별합니다. Datalist 내부에서 입력 필드에 사용 가능한 옵션을 나타내는 옵션 요소를 정의 할 수 있습니다. AutoComplete에 HTML5 Datalist를 어떻게 사용할 수 있습니까? 모든 브라우저에서 html5 데이터리스트 요소를 사용할 수 있습니까?
HTML5 데이터리스트 요소는 지원됩니다. Chrome, Firefox, Safari 및 Edge를 포함한 대부분의 최신 브라우저. 그러나 Internet Explorer 9 및 이전 버전에서는 지원되지 않습니다. 내가 사용할 수있는 웹 사이트에서 현재 브라우저 호환성을 확인할 수 있습니다.
HTML5 Datalist 옵션을 어떻게 스타일링 할 수 있습니까?

불행히도 HTML5 Datalist 요소의 스타일링 옵션은 상당히 제한적입니다. 드롭 다운 목록의 모양은 브라우저에서 제어되며 CSS로 쉽게 사용자 지정할 수 없습니다. 그러나 Datalist와 관련된 입력 필드를 스타일링 할 수 있습니다.
단일 입력 필드에 여러 데이터리스트를 사용할 수 있습니까? 아니요, 여러 데이터리스트를 단일 입력 필드와 연결할 수 없습니다. 입력 필드의 목록 속성은 하나의 Datalist에 해당하는 하나의 ID 만 가져갈 수 있습니다. 여러 옵션 세트를 제공 해야하는 경우 사용자 입력에 따라 옵션을 동적으로 변경하기 위해 JavaScript를 사용해야 할 수도 있습니다. 다른 입력 유형과 함께 HTML5 Datalist를 사용할 수 있습니까? , HTML5 Datalist는 텍스트, 검색, URL, 전화, 이메일, 날짜, 월, 주, 시간, Datetime-Local, 번호, 범위 및 색상을 포함한 다양한 입력 유형과 함께 사용할 수 있습니다. 그러나 Autocomplete 기능은 범위 또는 색상과 같은 일부 입력 유형에서는 예상대로 작동하지 않을 수 있습니다.
선택 요소와 함께 HTML5 Datalist를 사용할 수 있습니까? 선택 요소와 함께 사용하십시오. Datalist는 입력 필드에 대한 자동 완성 제안을 제공하도록 설계되었으며 Select 요소는 드롭 다운 옵션 목록을 제공합니다. 드롭 다운 목록이 필요한 경우 대신 선택 요소를 사용해야합니다.
html5 데이터리스트와 함께 javaScript를 사용할 수 있습니까?
예, HTML5 데이터리스트와 함께 JavaScript를 사용할 수 있습니다. 옵션을 제거하거나 변경합니다. 그러나 Datalist는 OnChange 또는 OnClick과 같은 이벤트를 지원하지 않습니다. 이벤트 리스너를 대신 관련 입력 필드에 추가해야합니다.
검색 필드에 html5 데이터리스트를 사용할 수 있습니까?
예, HTML5 Datalist는 검색을위한 훌륭한 선택이 될 수 있습니다. 필드. 사용자의 입력을 기반으로 자동 완성 제안을 제공하여 사용자 경험을 향상시킬 수 있습니다. 그러나 가능한 검색 용어로 데이터 주의자를 수동으로 채워야합니다.
텍스트와 함께 html5 데이터리스트를 사용할 수 있습니까?

아니요, html5 데이터리스트는 TextRea와 함께 사용할 수 없습니다 . Datalist는 Textarea가 아닌 입력 필드에 대한 자동 완성 제안을 제공하도록 설계되었습니다. Textarea의 경우 자동 완성 기능이 필요한 경우 JavaScript 라이브러리를 사용하거나 고유 한 솔루션을 구축해야 할 수도 있습니다.