JavaScriptでタグを追加する方法（jQueryのtagEditorプラグインを導入）

投稿日：2021年6月18日更新日：2021年6月30日

＜目次＞

(１) JavaScriptでタグを追加する方法（jQueryのtagEditorプラグインを導入）
　(１-１) 概要
　 (１-２) tagEditorの導入方法
　 (１-３) サンプル①：tagEditorでHello World

(１) JavaScriptでタグを追加する方法（jQueryのtagEditorプラグインを導入）

(１-１) 概要

Webページ等でテキストボックスに入力した値がタグ（色付きのボックスのような形式）で表示されているのを見たことがありますでしょうか？

（図１１１）タグのイメージ図

これはJavaScriptのライブラリであるjQueryのプラグイン「tagEditor」によって実現が可能です。今回はタグエディタを導入して、そこからHello World（初期値を指定してタグを表示する）手順をご紹介します。

＞目次にもどる

(１-２) tagEditorの導入方法

①ダウンロード

「tagEditor」のホームぺージ（下記URL）に移動して「Download」ボタンを押下します。

https://goodies.pixabay.com/jquery/tag-editor/demo.html

（図１２１）tagEditorダウンロード

②サーバに配備

上記でダウンロードした資源のうち、下記のjsとcssをサーバ内の、ご自身のプロジェクト内（Javaなら動的WebプロジェクトのWebContent内の任意のパス）に配置します。

・jquery.tag-editor.js

・jquery.tag-editor.css

（図１２２）

配備は、Linux系OSの場合はTeraTermなど、Windows系OSの場合はリモートデスクトップ等で資源を移動します。以下はCentOSでTeraTermのSSH SCP転送を使用している例です。

（図１２３）

以下は配置が完了した例です。

（図１２４）

ここまで完了したら、実際にHelloWorld用の簡単な画面を用意していきます。

＞目次にもどる

(１-３) サンプル①：tagEditorでHello World

（構文）

特徴としてtagEditorメソッドの引数としてオブジェクトを渡しますが、その中でタグの設定をつかさどる各種プロパティの値をセットしていきます（例：タグの初期値、デリミタ、空白時のメッセージなど）。

$(‘#[要素id]’).tagEditor({
    [プロパティ1]:[値1],
    [プロパティ2]:[値2],
    [プロパティ3]:[値3],
    …
});

//（例）
$('#demo1').tagEditor({
    initialTags: ['Hello', 'World', 'Example', 'Tags'],
    delimiter: ', ', /* space and comma */
    placeholder: 'Enter tags ...'
});

（表）tagEditorのHello Worldで使用するプロパティ

initialTags

初期値として表示するタグを指定します。

[‘タグ1’, ‘タグ2’, ‘タグ3’, ‘タグ4’,….]

（例）
[‘Hello’, ‘World’, ‘Rainbow’]

delimiter

非表示になっているtextareaにおいて、タグの値を何の記号で連結しているか？を指定します。例えば、カンマ「,」を指定した場合は値は裏のテキスト値は次のようになっています。

Hello,World,Rainbow

placeholder

タグが無い状態でボックスに表示するメッセージを指定しています。

（例）
ここにタグを入力してください・・・

（サンプルプログラム）
冒頭の<script>で必要なjQueryライブラリ等をインポートしつつ、途中の<script>では上記の構文を使ってタグエディタを初期化しています。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js_tagedit/jquery.tag-editor.js" ></script>
<link rel="stylesheet" href="./css_tagedit/jquery.tag-editor.css" >

<script type='text/javascript' >
//# $(document).ready()の省略形で、document準備完了時にtagEditorを初期化
$(function(){
    //# textareaにタグエディタ(tagEditor)をアサイン
    $('#tagedit_test').tagEditor({
        initialTags: ['Hello','World','Rainbow'],
        delimiter: ',',
        placeholder: 'Enter tags...'
    });
});
</script>
<title>JavaScript tagEditor Test</title>

</head>
<body>

<h2>■tagEditorの疎通チェック</h2>
<textarea id="tagedit_test"></textarea>

</body>
</html>

（図１３１）実行結果

（図１３２）実行結果（拡大図）

（図１３３）プログラムイメージ

＞目次にもどる