今どきの入力フォームはこう書け！「datalist編」

今更、HTML5のデータリストが便利なことに気がついた、弓削田です。 データリストというのは、HTML5から搭載された、HTMLタグなんですが、 これまでselectタグで扱っていたものを、デザイン設定がやりずらいため、 データリストを使うと、見た目も機能も便利に使えるっていうヤツです。 僕が以前ブログで書いた、JSでプルダウン機能の上位版に非常に似ているので、 気になる方はそちらのブログも参考に見てみてください。 [Javascript] serectタグは使いづらい、選択も入力もできるフォーム構築ができる「pulldown.js」

データリストタグについての基礎知識

この時点でデータリストタグを知らない人のために簡単に説明しておきます。 webで検索すると簡単にリファレンスサイトが出てくるので、そちらを読んでもらった方がはやいかもしれませんが、 このデータリストという機能は、入力フォームに対して、入力候補の一覧をリスト表示してくれる機能です。 入力途中でも、前方一致でマッチするもののみを絞り込んでリスト表示してくれるので、 仕事などで使っているwebサイトなどに導入すると、作業効率がアップすることは間違いないでしょう。 selectタグとの違いは、 selectタグは、決まったリストを選択するだけの機能ですが、 データリストタグは、基本的にinputタグで、自由入力です。 おまけに、デザインもinputタグに対してセットすればいいので、比較的柔軟だと考えられます。

データリストタグサンプル

「百聞は一見にしかず」ということで、次のコードを用意してみました。 <input list="values" value=""/> <datalist id="values"> <option value="apple"> <option value="tomato"> <option value="orange"> <option value="banana"> </datalist> 実際に文字を入力するとプルダウンリストのように候補が表示されます。 ただ、残念なことに、1文字目の入力は、あまり絞り込み精度が良くなくて、思ったとおりのリスト表示にはなりませんが、 入力が便利になることは間違いないでしょう。 あと、もう一つ残念なのは、スマホでの候補表示は、パソコンブラウザとは違うという点です。 こんな感じで、文字変換のエリアにリスト表示されてしまいます。 これを考えると、僕の作ったツールの方が、デザイン統一できる点では便利かもしれませんね。 なにはともあれ、こんなに簡単に使えるデータリスト、覚えておいて損はないでしょう。