WordPress Snippet

ワードプレスをカスタマイズしよう

検索フォームにひと手間　datalist要素で　テキストフィールドを選択式に変更

tenman

検索フォーム

searchform.php

以下はありふれた検索フォームのソースですが、これにひと手間加えて　テキストフィールドを　キーワード選択可能な フォームに変更してみます。

 <form method="get" name="searchform" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
 <div class="searchform">
<label class="screen-reader-text" for="s"><?php esc_attr_e('Search for:', 'raindrops');?></label>
<input type="text" value="<?php the_search_query(); ?>" placeholder="<?php esc_attr_e( 'Search', 'raindrops' ); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'raindrops' ); ?>" />
 </div>
 </form>

選択可能な　テキストフィールド



選択式にカスタマイズする方法

テキストフィールドに　list=”keyword-list”　を追加して datalilst要素を追加してあげるだけの簡単なカスタマイズで選択式にすることが出来ます。

<form method="get" name="searchform" id="searchform" action="">
 <div class="searchform">
<label class="screen-reader-text" for="s">検索</label>
<input type="text" value="" placeholder="キーワードからも選べるよ" name="s" id="s" list="keyword-list" />
<input type="submit" id="searchsubmit" value="検索" />
<datalist id="keyword-list">
 <option value="うさぎさん">
 <option value="犬さん">
 <option value="猫さん">
</datalist>
</div>

datalist要素を、PHPで動的に書き換えてやるようにすると、更に細かい絞り込みなどが可能になりそうですね。

ブラウザサポート

Can I use

Safariは、サポートしていないですが、フィールドが使えないという事はないので、大きな問題にはならないのではないかと楽観

[emulsion_relate_posts]