質問: ### teratailの質問でタグを入力したときにでてくる候補リストのhtmlタグについて。 現在teratailのような質問サイトを作ろうとしています。詰まったことがあったので質問させていただきました。 teratailではタグを入力したら以下のように自動で候補を出してくれるかと思います。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/bf2fba666ed63da3768b6387b98ae131.png) 私はこの機能を気に入っていましてとりいれたいと思っているのですが、この候補を表示するものがどんなタグ(この場合は<>で表せるhtmlのタグ)なのか全く見当がつきません。 プルダウンでもないようですし、浮いているのでリストでもないようです。多分bootstrapじゃないかなと思いつつ、いろいろ検索しましたがそれらしいものは見つかりませんでした。 文字の入力を検知しデータベースからタグを取り出す機能は実装できそうなのですが、それを入れる入れ物がない状態です。 私が書いたコードの一部とそれがどんな感じになっているかを以下にのせておきます。このに置き換わるものを探しています。どうかご助言いただけるとありがたいです・・ ``` こんにちわ ``` ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/56d3904252b6fb09d33e5c7fd72f4372.png)
回答: まずは、bootstrapがなんなのか、から勉強されたほうがいいかと。 bootstrapはあくまで、CSSを早く使いやすくするためのフレームワークなので、その箇所はあくまで、HTMLタグで構成されているはずです。 そして、どういう仕組みかは、mts10806さんがおっしゃる通り、ブラウザの要素検証機能を使われるといいかと思いますよー。 パッと見では、 入力→検索→見つかればHTML要素を挿入 としているので、**JavaScript**は必須です。 mts10806さんのおっしゃる通り、サジェスチョンを簡単に実装できるライブラリもあります。 そこからは、もしかしたら、phpなどのサーバーサイドと連携しているかもしれませんし、なんとも言えませんが、なんらかの形で、候補が蓄積させており、その蓄積情報から、該当キーワードがあるかどうかを検索しているはずです。 あと、挿入要素がp以外で、という部分ですが、 それは、別にpでいいかと思いますが。 どの要素が適切かは、質問者さんのやりたい形によります。