teratailの質問でタグを入力したときにでてくる候補リストのhtmlタグについて。

Question

###teratailの質問でタグを入力したときにでてくる候補リストのhtmlタグについて。
現在teratailのような質問サイトを作ろうとしています。詰まったことがあったので質問させていただきました。

teratailではタグを入力したら以下のように自動で候補を出してくれるかと思います。

私はこの機能を気に入っていましてとりいれたいと思っているのですが、この候補を表示するものがどんなタグ(この場合は<>で表せるhtmlのタグ)なのか全く見当がつきません。
プルダウンでもないようですし、浮いているのでリストでもないようです。多分bootstrapじゃないかなと思いつつ、いろいろ検索しましたがそれらしいものは見つかりませんでした。

文字の入力を検知しデータベースからタグを取り出す機能は実装できそうなのですが、それを入れる入れ物がない状態です。

私が書いたコードの一部とそれがどんな感じになっているかを以下にのせておきます。この<p>に置き換わるものを探しています。どうかご助言いただけるとありがたいです・・

<input type="text" class="form-control form-control-sm" placeholder="タグ1(例:群論)" onkeyup="getTagText(this);">
<p>こんにちわ</p>

Answer 1

タグがどんなタグかはブラウザの開発ツールで見れば分かるのでそれで確認してもらうとして、機能的には「サジェスト機能」 「サジェスチョン」と言うものになります。
「予測変換」ですね。
プラグインもありますので調べてみてください。

ちなみに、標準でタグ打ち込み、削除に対応しているCSSフレームワークもあります。
ただ、サジェスチョン部分は自分で作りこむ必要がありますし、存在しないタグのチェックも自分でする必要があります。
teratailにはタグ一覧がありますし、運営に依頼しないとタグの追加はしてもらえないとはいえ、かなりの数があるのでDBに持っていて何か文字を打つたびに非同期で検索して候補を出しているのはほぼ間違いないと思います。
なので、プラグインを入れたとしてもその「候補一覧」のところは自分で用意する必要があるので、そこは気を付けてください。
あとは「見せ方次第」なので、割とどうにでもなると思います。
「一覧」になるので望ましいタグはありますが。

蛇足部分が多かったので、私が確認した「使ってるタグの見方」を画面キャプチャつけておきます。
「デベロッパーツール」で検索すれば使い方解説のサイトは結構あります。

Comments

[miyabi_pudding]

> 標準でタグ打ち込み、削除に対応しているCSSフレームワークもあります。

ひゃー、そんなのあるの勉強不足で知りませんでした。
最近勉強不足多い 汗
常に勉強しないと追いつけないですね 汗

[m.ts10806]

たまたま重用しているCSSフレームワークにあった（というか途中で機能追加されたっぽいです）
「便利だなぁ」と思ってました。後発のものなので結構そのあたりはよくできてます。文中にリンク貼ってますが、最近teratailタグに追加申請してくれた人がいるので、今後質問増えるかもしれませんね。

[m.ts10806]

一応、貼っておこうかな、本題のタグの確認手法。

[hood]

回答ありがとうございます！丁寧に画像までつけてくれてとても助かります。
>標準でタグ打ち込み、削除に対応しているCSSフレームワークもあります
そうだったのですね・・・自分の無知なことを改めて知りました。
貼っていただいたリンク参考にさせていただきたいと思います！
返す返すありがとうございました。

[m.ts10806]

いえ、これはフレームワークを重用したことがないと難しいと思うのでここで知らないことを「無知」とは誰も思ってないと思います。
BootStrapで全く実現が不可能ではないと思いますし（そこは幾らか自分で用意する必要があるとは思いますが）
リスト部分とかチップ部分は使えると思うので、がんばってみてください。
（一度私はCSSフレームワークなしで自作しましたが、結構勉強になりました）

デベロッパーツールが使えるといろんな確認ができて勉強もできるので、ぜひ使いこなせるようになってください。

[hood]

はい！

Answer 2

まずは、bootstrapがなんなのか、から勉強されたほうがいいかと。
bootstrapはあくまで、CSSを早く使いやすくするためのフレームワークなので、その箇所はあくまで、HTMLタグで構成されているはずです。
そして、どういう仕組みかは、mts10806さんがおっしゃる通り、ブラウザの要素検証機能を使われるといいかと思いますよー。

パッと見では、
入力→検索→見つかればHTML要素を挿入
としているので、JavaScriptは必須です。
mts10806さんのおっしゃる通り、サジェスチョンを簡単に実装できるライブラリもあります。
そこからは、もしかしたら、phpなどのサーバーサイドと連携しているかもしれませんし、なんとも言えませんが、なんらかの形で、候補が蓄積させており、その蓄積情報から、該当キーワードがあるかどうかを検索しているはずです。

あと、挿入要素がp以外で、という部分ですが、
それは、別にpでいいかと思いますが。
どの要素が適切かは、質問者さんのやりたい形によります。

Comments

[m.ts10806]

色々見てたら、一回出たらdisplay:hiddenでずっと待機してることに気づきました。自分が実装するなら用が済んだら消してしまうんですが、なかなか面白い仕様だなと。

[miyabi_pudding]

おお・・・！
それは面白いですね。
不必要なリクエスト減らしてるわけですか・・・。
なんとなくですが、DB設計時の、deleteフラグを用意して、レコード自体は残しておくっていう設計、考え方と少し近いように思います。

[m.ts10806]

タグが確定したら消すのかなと思ったらそうでもなかったので、でも結局、前引っ張ってきた候補に合致しない文字が打たれたらタグから作り直してるので、どうなんかなぁと。（合致してる文字が打たれたら表示非表示切り替えているだけ）
確かにリクエスト数は減りますが、あまり同じ文字を含むタグをつけることってないように思うので。でもそれなりに大きいサイト規模故に、ここは本当に「極限までリクエストを減らしたい」ということなんでしょうね。ちょっと勉強になりました。

[hood]

miyabi_takatsukさん、回答ありがとうございました！
>ブラウザの要素検証機能
実はすでにちらっと見ていたですが、あの文字の多さとコードの難解さに、今まで及び腰でした。これからは面倒くさがらず調べたいと思います！

またお二人の会話もとても高いレベルで、とても勉強になりました。今後の設計に参考にさせていただきたいと思います。返す返すありがとうございました。

[m.ts10806]

>実はすでにちらっと見ていたですが、あの文字の多さとコードの難解さに
ここだけで「使い方」解説すると、ツール左端の左斜上矢印をクリックすると「要素選択モード」のなるのであとは画面から見たい要素を選択するとツールの「Elements」で選択要素のHTMLとリンクしてくれます。
あとは「Elements」内で一度クリックしてCtrl+Fを押すとfilterが現れるので検索もできます。

[hood]

コメントありがとうございます！今試してみました。これは便利ですね・・・
この機能は検証機能一例だとは思うのですが、もっと勉強しようという気になれました。
丁寧に追記してくださったこと、再び感謝したいです！