指定のワードのみタグにする

Question

以下の画像のようなタグを実装しています。Jqueryを利用しています。
現状、inputしたワードを全てタグ化してDB保存されるかたちですが、
すでに「DBに保存されているタグのワードのみ選択できる(それ以外のワードはタグにならない)ようにするにはどのような実装方法がありますでしょうか？

<div class="col-sm-12 %hideSkillsForCustomer%">
							<div class="form-group">
								<label>Skills</label>
								<div class="tagscont" data-ele="skillsContainer"></div>
								<input type="text" class="tagsinput form-control" placeholder="E.g: PHP, Photoshop, Mongo DB - Seperate with commas"
								name="skillsId" data-ele="skillsId" tabindex="6" />

							</div>
						</div>

」

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[kei344]

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

Answer 1

こんにちは。

ざっくりした回答になりますが、以下のような手順になるかと思います。

(1) すでに DB に保存されているタグ一覧を取得する API (がまだないのであれば、これ）を、サーバーサイドで作る。

(2) フロントエンドで、(1)のAPIを呼ぶ部分を $.ajax などを使いつつ作る。

(3) APIで取得されたタグ一覧のタグしか選択できないようにするUIは、色々、考えられると思いますが、
簡単なのは、

• 複数選択可能な <select> の <option> としてタグを一覧してそこから選んでもらう

　ことが思いつきます。

どのようなUIになるにせよ、すでに保存されているタグしか選べず、ユーザーからの
テキスト入力で新たなタグを作らせないのであれば、画像にあるような
テキスト入力 <input type=“text”> 部分は必要なくなると思われます。

以上、参考になれば幸いです。

Comments

[rumi]

ありがとうございます、こちら大変参考になりました。一旦私の方で解決いたしました。

[jun68ykt]

解決されたとのことで、よかったです！

Answer 2

Jqueryのtagmanagerを修正して解決