datalist要素を使ったフォームの作り方

今回はHTML5に新しく加わったdatalist要素を使ったフォームの作り方を紹介します。datalist要素とはinput要素にサジェスト機能を追加する要素です。

フォームを作成するとなると<input type=”text”>や<select>を使うことが多いですが、datalist要素を使うことで、これら両方の入力形式を一つのフォームで併せて実現することができます。

datalist要素を使ったフォームの実装デモ

次のフォームにテキスト入力もしくはダブルクリックしてメニューを選択してください。

ダブルクリックすると選択肢に

• 北斗神拳
• 南斗聖拳
• 南斗水鳥拳

と表示されます。これら選択肢のいずれかを選ぶとフォームに選択肢のテキストが入力されます。テキストはもちろん後で修正できます。

※safariやIE9以下といったdatalist要素に未対応のブラウザの場合、選択肢が表示されません。chromeでご確認ください。

datalist要素を使ったHTMLの記述の仕方

では実際にdatalist要素を使ったフォームを実装してみます。実装のHTMLはこちら。

<form action="#">
好きな拳法：<input type="text" name="a" list="kenpo" placeholder="テキスト入力もしくはダブルクリック" autocomplete="off">
  <datalist id="kenpo">
    <option value="北斗神拳">
  　<option value="南斗聖拳">
  　<option value="南斗水鳥拳">
  </datalist>
</form>

datalist要素の中に入れたoption要素が入力候補となる選択肢となります。input要素とdatalist要素を関連づけるにはdatalist要素のid属性とinput要素のlist属性に同じ値を指定します。

input要素の直下にdatalist要素がある必要はなくdatalist要素と要素の内容はフッターにまとめて記述しておくといった使い方もできます。

input要素にlistタグがない場合の対応方法

CRMやカートシステム等でdatalist要素を使いたい時に、datalist要素とその内容は追加で記述することはできるけど、関連付けするためのinput要素に対してlist属性をうまく挿入することができないといった場合があります。
 
こういった場合は次のようにJavascriptを使ってinput要素にlist属性と値を追加することで解決しましょう。

<script>
$( function() {
//inputタグにlist属性とその値"keyword"を設定する
    $( 'input[name="name"]' ).attr('list', 'keyword');
  } );
</script>

終わりに

datalist要素はフォームに自由入力もできるけど、頻繁に入力されるであろうワードがいくつか想定される際、選択肢から選ばせるようにしてユーザーの入力効率をよくしたいといった場合に利用するとよいでしょう。

現時点では未対応のブラウザがあるので使いづらい点もあるかもしれませんが試しに使ってみるのも良いかと思います。