タグ機能で、カンマ・スペースを打つとスタイルが変わるアレってどう作っているのですか

Question

##質問内容
teratailをはじめ、投稿型サービスにあるタグ機能について質問です。

formに登録したいタグをひとつ入力

↓
カンマorスペースを打つ
↓
タグの背景色などスタイルが変わる

以上のよくある仕様を作りたいと思っています。
ただ、方法がわからず、そもそもどういう仕組みでできているのか教えていただきたいです。
ソースコードをいただけるのが一番うれしいですが、検索するためのキーワードを教えていただけると助かります。

現状開発したもの

Python/Djangoでタグ機能は実装済みです。
formにカンマ区切りで入力すると、それぞれタグが登録されます。
ただ、カンマで区切ってもスタイルは変わりません。

Comments

[hoshi-takanori]

こういうやつ？
https://www.npmjs.com/package/material-ui-chip-input

[Takatsuki]

そういうやつです！それってシステム全体でreactを使ってなくても使えます？

Answer 1

Bootstrap Tags Input

Answer 2

セパレータが入力されたのをイベントトリガーとして非同期で存在するタグかどうかチェックしたうえで存在する場合にタグっぽく見えるようにCSSで装飾してるのではと。
非同期でのタグの存在チェックと、文字色変えるところくらいから始めてみては。