NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

HTML5のフォームで使えるautocompleteをつかって投稿タイトルを自動補完させるテスト

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1535日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

HTML5で追加されたタグで、フォームのインプットフィールドに対するオートコンプリートを仕込めるようになりました。

みたいにすると、指定したリストをもとに補完リストを表示してくれるというもの。

このdatalistの中のoptionタグの中身をループで生成すれば、記事リストを補完リストに入れられるんじゃないのかな?
ってことで実験。

全部の投稿を候補にしたいけど、中には候補に出したくないカテゴリなんかもあるかもしれませんよね。
そこでWP_Queryでとってきた投稿データをtax_queryでフィルターかけてます。

あとは普通にループを書いて、その中で取得した記事の数だけ<option>タグを生成させれば完成ですね。

今回は検索候補の左側に記事を、右側にカテゴリー(タクソノミー)を表示するようにしてみました。

 

でも多分ずっと運用していて記事の数がものっそ増えてきたら大変なことになると思うので、必要に応じて「posts_per_page」の値を決めて読み込む数を制限しておいたほうがいいかもしれませんね。

posts_per_pageを100とかにして、「最新の投稿から100件までは自動的に補完されます」とかね。

ちなみに-1は全部取得って意味です。

今回はHTML5でやりましたが、jQueryでもできるようなので、今度はそっちに移植してみようかと思ってます。
んで、両方ためしてみて、使い勝手が良さげな方をこのブログにも設置しようかな、と。笑

TAGS