datalist要素とは

HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。

datalistタグ内に入力候補としたいワードをvalue属性に持つoptionタグを複数記述します。

<form method="get" action="">
<input type="text" list="tools">
<datalist id="tools">
<option value="手裏剣">
<option value="まきびし">
<option value="煙玉">
</datalist>
<input type="submit" value="送信">
</form>

つまりdatalist要素とは、input要素にサジェストを追加出来る要素だということです。

datalist 要素 – フォーム – HTML要素 – HTML5 タグリファレンス – HTML5.JP

datalistタグが使えるinput要素のタイプはtextだけではなく、様々なものに使えます。

変わったものはそもそもまだ対応していないブラウザーも多いのですが、colorなんかは結構使い方が色々思いついて面白いですね。

datalist要素(入力候補一覧) – HTML 5 リファレンス

datalist要素のブラウザー対応状況

datalist要素は現在Firefox、Google Chrome、Opera、Internet Explorer 10が対応しています。Safariが対応していないとは意外。

HTML datalist Tag

対応していないブラウザーはdatalist要素内のoption要素も含め表示しません。大した量でないのであれば記述しておいて損なことはないでしょう。

datalist要素のコンテンツ・モデルはoption要素またはフレージング・コンテンツであり、optionタグ以外の内容を記述する事も出来ます。その場合、そのフレージング・コンテンツはdatalist要素に対応しているブラウザーでは表示されず、非対応ブラウザーでのみ表示されます。つまり、代替コンテンツの様に、注意書きとして使うような形になります。

<form method="get" action="">
<input type="text" list="tools">
<datalist id="tools">
<option value="手裏剣">
<option value="まきびし">
<option value="煙玉">
<small>対応ブラウザーでは入力候補が表示されます</small>
</datalist>
<input type="submit" value="送信">
</form>

datalist要素の使いどころ

最初から入力する要素が完全に決まっている場合は別に文字入力をさせる必要はないわけですし、その場合はselect要素を使いますよね。

つまりdatalist要素は自由入力を認めつつ、頻繁に入力されるであろうことがわかっているワードが想定される場合に使われることになるでしょう。具体的には時刻、駅や国名等を入力する場合でしょうか。ECサイト等で、流行っているモノや売り出し中のものをレコメンドする目的にも使えるような気がします。

動的に扱うなら、SNS等で友人を検索する場合に、既に友人になっている人の名前を生成しておくといった使い方もできそうですね★

WordPressの検索窓をdatalistでカスタマイズする

WEBCRE8.jpはWordPressで作られたブログです。これでまず、検索窓を編集して入力候補を作れるようにしてみましょう。

searchformテンプレート

WordPressのテンプレートにはsearchform.phpというものがあります。これはWordPressのウィジェット、検索を設置した場合や、get_search_form関数を使うと自動的に呼び出されるものです。仮にこのテンプレートを設置していない場合はデフォルトの検索フォームが呼び出されます。

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

これを自分で編集した検索フォームにしたい場合にはこのテンプレートを使用する事になります。

テンプレートファイルを増やしたくない人はfunctions.phpに記述することもできるようなので、その辺更に詳しく知りたい人は以下を参照してみてください。

関数リファレンス/get search form – WordPress Codex 日本語版

searchformテンプレートをカスタマイズする

では次にこのsearchform.phpを編集してみます。datalistタグを設置し、そのdatalistタグと紐付かせるlist属性を検索フォームのinputタグに付けなければいけません。

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" list="searchtag">
<datalist id="searchtag">
<option value="HTML5">
<option value="フォント">
<option value="忍者">
</datalist>
<input type="submit" id="searchsubmit" value="検索">
</div>
</form>

このように、listにsearchtagを指定する事で、後のdatalist要素を検索窓に結び付けます。

指定した入力候補の表示

これでちょっと便利に…少なくとも選ばせたいワードを指定できるようにはなりますね★

PHPを使ってブログのタグを自動的に値として取得する

さて前述のように簡単に検索候補を指定できるdatalist要素ですが、やはり一つ一つこれを用意するのはめんどくさいですよね。自動的にこれを用意できるならその方が便利です。

考えたのが、WordPressで記事を検索させるとき、予めサイトに設置されている記事のタグが選択できるようにしてはどうかという事です。

私はPHPに関してはさっぱりなので、以下の記事を参考にして作ってみました。

foreachの勉強がてら、ブログ内に存在するすべてのタグを取得し1件ずつ表示させるループを書いた[WordPress] | マイペースクリエイターの覚え書き

要はタグの名前をoptionタグの値として取得し、全ての投稿タグをその形でループさせれば出来るわけですよね。

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" list="searchtag">
<datalist id="searchtag">
<?php
$alltags = get_terms('post_tag'); //ブログ内に存在するすべての投稿タグを順番に取得していく
foreach($alltags as $taginfo): //取得したタグをその都度、変数$taginfoに代入する
?>
<option value="<?php echo $taginfo->name; ?>">
<?php endforeach; ?>
</datalist>
<input type="submit" id="searchsubmit" value="検索">
</div>
</form>

入力すると投稿タグがサジェストされる

こうする事で、基本的にサイトで提供できる情報についてはここである程度示すことが出来ようになるわけです。便利ですねー！実際に今WEBCRE8.jpのサイドバーの検索フォームにこの機能を実装しています。対応ブラウザーで試してみてくださいー★

同じように記事のタイトルを入力候補にすることもできると思うのですが、そっちはタグと違って膨大な量になるような気もするのでどうなんでしょうね。いずれにせよHTMLが膨大になり過ぎるような使い方は微妙かなとも思っています。

終わりに

残念ながらSafariとIE9以下は対応していないという事でしたね。こうした機能を使うときの注意点は、「これがなければ使えない」というような状況を作らないようにすることです。入力補助はあくまで補助なので、なくても検索は出来ます。でも、さすがにこれだけをサービスの根幹部分の選択に使う事はできませんよね。

便利な機能なのでワンポイントで使っていきたいですね★