HTML5で追加されたタグで、フォームのインプットフィールドに対するオートコンプリートを仕込めるようになりました。
|
1 2 3 4 5 6 7 |
<input type="text" name="hogehoge" autocomplete="on" list="aclist"> <datalist id="aclist"> <option value="候補１">候補１</option> <option value="候補２">候補２</option> <option value="候補A"></option> <option value="候補B"></option> </datalist> |
みたいにすると、指定したリストをもとに補完リストを表示してくれるというもの。
このdatalistの中のoptionタグの中身をループで生成すれば、記事リストを補完リストに入れられるんじゃないのかな？
ってことで実験。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>"> <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" autocomplete="on" list="autocomp_data" placeholder="キーワードを入力" /> <input type="submit" id="searchsubmit" value="検索" /> </form> <datalist id="autocomp_data"> <?php $myQuery = new WP_Query(array( 'post_type' => array( 'post', 'item', ), 'posts_per_page' => -1, 'tax_query' => array( 'relation' => 'or', array( // 除外設定（カテゴリ） 'taxonomy' => 'category', 'terms' => 'disp_top', 'include_children' => true, 'field' => 'slug', 'operator' => 'NOT IN', ), ), )); if ($myQuery->have_posts()):while($myQuery->have_posts()):$myQuery->the_post();?> <?php $myCat = get_the_terms(0,array('category','item-category','item-genre')); ?> <option value="<?php the_title(); ?>"><?php echo $myCat[0]->name; ?></option> <?php endwhile; endif; ?> </datalist> |
全部の投稿を候補にしたいけど、中には候補に出したくないカテゴリなんかもあるかもしれませんよね。
そこでWP_Queryでとってきた投稿データをtax_queryでフィルターかけてます。
あとは普通にループを書いて、その中で取得した記事の数だけ<option>タグを生成させれば完成ですね。
今回は検索候補の左側に記事を、右側にカテゴリー（タクソノミー）を表示するようにしてみました。
でも多分ずっと運用していて記事の数がものっそ増えてきたら大変なことになると思うので、必要に応じて「posts_per_page」の値を決めて読み込む数を制限しておいたほうがいいかもしれませんね。
posts_per_pageを100とかにして、「最新の投稿から100件までは自動的に補完されます」とかね。
ちなみに-1は全部取得って意味です。
今回はHTML5でやりましたが、jQueryでもできるようなので、今度はそっちに移植してみようかと思ってます。
んで、両方ためしてみて、使い勝手が良さげな方をこのブログにも設置しようかな、と。笑
コメントする