teratailの質問投稿時のタグフォームを実現させたい。

Question

teratailの質問投稿時のタグフォームのようにあらかじめデータベースに登録したタグしか登録できないようにしたい。

また、フォーム側はteratailと同じ用に
https://gyazo.com/01b509a3cd2ca3091d6f7782ff82a9e6
このようにxマークがつくように同じinputの中に連続して表示させたいです。

具体的な方法がよくわかならいのですが、html5のdatalistを使うのかajaxを使えばいいのかそのあたりもよくわかりません。

アドバイスいただけないでしょうか?

Answer 1

はじめまして！

teratailのタグの実装は下記のjQueryプラグインを使用しているようです。
オプションでデフォルトや制限などの設定も可能なようですので、ぜひ下記リンクをご参考ください。
Bootstrap Tags Input

公式より、候補は下記のように設定が可能なようなので、
データベースから抽出したデータを配列に格納し、source:部分に記述すればご希望の挙動が実現できるのではないでしょうかm(_ _)m

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  }
})

似たようなプラグインでは【Tag-it!】も有名ですね。
Tag-it!

Comments

[PotetoMan]

こちらも簡単そうですね!!ありがとうございます!!

Answer 2

jQueryのプラグインにソレ系のプラグインが沢山ありますよ。好みや、サイトの仕様に合わせて色々試してみるのをオススメします。有名ところだと、Tag-itというプラグインが有名だと思います。

http://aehlke.github.io/tag-it/

Comments

[PotetoMan]

まさにこれっぽそうです!!!
ありがとうございます。試してみます!!