دیتالیست‌ در HTML5

این کار ابتدا با ایجاد یک شی جاوااسکریپت و سپس وارد کردن هرچند تعداد گزینه‌ها انجام می‌شود…

مثال:

<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> <label for="tags">Tags: </label> <input id="tags" /> </div>

اما ویژگی و خصوصیات بسیاری به HTML5 اضافه شده اند که بیشتر آنها از API های اضافی جاوااسکریپت استفاده می‌کنند. از میان این قابلیت‌ها می‌توان به اعتبار سنج فرم که قبلا توسط جاوااسکریپت انجام می‌شد اشاره کرد که هم اکنون می‌توان قابلیت‌ require که باعث اینکار در HTML5  می‌شود را جایگزین آن کرد. و یا می‌توان به خصیصه placeholder اشاره کرد که برای استفاده از آن وجود جاوااسکریپت اجباری بود…

مثال:

<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>

اکنون برای استفاده از این لیست باید جعبه را ایجاد کرده و این لیست را به آن اختصاص دهید و ID لیست را در آن وارد کنید؛

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