HTML : HTML5 Datalist 사용 방법 : 예제, 구현

HTML : HTML5 Datalist 사용 방법 : 예제, 구현

 

대부분의 사람들은 응용 프로그램에서 jQuery 라이브러리 jQuery UI를 사용하므로 colour picker, sliders, accodrions, dialog boxes, menus, progress bars로 구성된 유용한 요소에 액세스 할 수 있습니다.

jQuery UI 라이브러리에 있는 가장 유용한 요소 중 하나는 자동 완성 요소입니다. jQuery UI 자동 완성 기능은 자동 완성 텍스트 상자에 텍스트를 입력 할 때 검색되는 여러 옵션으로 채울 수 있는 Javascript 객체를 먼저 생성하여 작동합니다.

<script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
</script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

 

HTML5와 함께 제공되는 많은 새로운 기능이 대부분 추가 Javascript API를 사용하고 다른 기능은 양식 유효성 검증과 같은 Javascript를 사용하는 기존 기능을 이제 require 속성으로 대체 할 수 있습니다.

placeholders 특성은 Javascript를 사용해야하는 또 다른 기능입니다. HTML5에는 Datalist라는 요소가 있어 자바 스크립트를 사용하지 않고도 자동 완성 상자를 만들 수 있습니다. 먼저 ID와 옵션 목록이있는 datalist 요소를 만듭니다.

<datalist id="availableTags">
    <option value="ActionScript">
    <option value="AppleScript">
    <option value="Asp">
    <option value="BASIC">
    <option value="C">
    <option value="C++">
    <option value="Clojure">
    <option value="COBOL">
    <option value="ColdFusion">
    <option value="Erlang">
    <option value="Fortran">
    <option value="Groovy">
    <option value="Haskell">
    <option value="Java">
    <option value="JavaScript">
    <option value="Lisp">
    <option value="Perl">
    <option value="PHP">
    <option value="Python">
    <option value="Ruby">
    <option value="Scala">
    <option value="Scheme">
</datalist>

 

이제 자동 완성에서 이러한 옵션을 사용하기 위해 입력 유형 목록을 만들 수 있습니다.

<input name="availableTags" list="availableTags" />

 

Browser Support

datalist 요소는 현재 Chrome, Firefox 및 Opera에서 지원됩니다. 현재 지원되는 테이블을보고 정확히 어떤 브라우저가 지원하는지 확인하십시오.