ある項目を複数選択する際にHTMLではフォームではcheckboxやselectのmultiple属性を指定したりすることが多いと思います。
多数ある項目を選んだり、また、自身でオリジナルの項目を追記したい場合は「その他」とかいうラベルを付けて予め用意した項目以外を入力させるためのフォームを用意したりすると思います。
最近のWebではcheckbox使う時は大体簡易的なアンケートフォームとかお問合せフォームなどで良く見かけますが、SNSなどではcheckboxではなく、単語を入力し、カンマやスペース入れると勝手にボックスで囲み、タグ風にしてくれるものが多く見かけられます。
あれ、結構見た目良くて使い勝手良さそうじゃないですか？どうやって実装するんだろうとちょっと先日探しました。
すると、良さげなJSがありました。その名も「Tagify」
formの中に文字を入力し、カンマを入れると一つの単語でボックスにしてくれるもの。見た目もすっきりしていいですね♪
これを実装するためにはJSライブラリを読み込み、ターゲットとなるinputフォームをJSで指定するだけでいいんだそう。
// html
<input name='tags' value='tag1, tag2' autofocus>
// Javascript
var input = document.querySelector('input[name=tags]');
new Tagify(input)
※サイトのサンプルソースを引用しています。
出来上がった文字を入力してカンマを入れると以下のようなタグ風にしてくれます。
これですよこれ！末尾に✕印が付いて削除もできるようなこの仕組み！
後思ったのは、タグをいくつか入れた後にDBに登録する場合、どのようなデータが飛んでくるのだろうとみてみました。
通常checkboxの場合、name属性に共通のものを設定し、valueに各々の値を入れて、複数選んだ状態で飛ばした場合は、array型で飛んでくると思います。
// 以下のような状態でtest1とtest3を選択
<input type="checkbox" name="check" value="test1" />
<input type="checkbox" name="check" value="test2" />
<input type="checkbox" name="check" value="test3" />
$_POST['check'] で取得
array("0" => "test1", "1" => "test3")
で、Tagifyの方はなにも設定しなかった場合、arrayでなく、以下のような文字列で飛んできました。
{['0' => 'test1'],['1' => 'test3']}
もしarrayで飛んできた場合、serialize()かimplode()で文字列に変換してからDBに入れると思うんですが、初めから文字列で飛んでくるので楽でした。
ただ、今度は取り出したあとinputフォームの中に予めタグを用意させておく場合はどのように処理したらいいんだろうと考えました。
また、フォームの内容だけでなく、DB側やプログラム上で何かしらの処理が必要な場合、array型の方が楽だったりするのかな？など思い始め、それならimplode()でカンマ区切りの文字列で保存した方がいいのではないかと思い、何か方法はあるのかな？と調べるとありました。
var input_data = document.querySelector('input[name=check]'),
tagify = new Tagify(input_data, {
originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
});
このように設定するとカンマ区切りの文字列データで飛んできてくれます！素敵！
しかも、この文字列のまま保存した場合、取り出したものを再びinputフォームのvalueに充てると、フォームの中にタグを生成して表示した状態にしてくれます。とても便利です！
SNSとかで良くみるこのプログラムが手軽に実装できるとかホント開発者に感謝です。
githubでライブラリを公開していますので、使ってみたい方はgithubからダウンロードしてご利用ください。