複数のタグをサクッと追加できるjQueryプラグイン「Input_Tag」を作りました

2018/03/23更新 カテゴリー:開発奮闘記 タグ: ,
  • このエントリーをはてなブックマークに追加

テキストフィールドに入力すると、自動補完で選択肢がでてきて、タグが追加されるような仕組みを入れたかったのですが、既存のもので使い勝手がよさそうなものがなかったので作ってプラグインとしてgithubで公開してみました。

SPONSOR

複数タグの追加がサクッとできる

sample
文字を入力すると、選択肢がでてきます。選ぶと、入力ボックス内にタグがペタッと張り付きます。デモはこちらから

設置方法

jQueryとjQuery UI、CSSを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css">

タグ入力表示部分

<div id="tagwaku">
  <div id="tags"></div>
  <input type="text" id="tag-input">
  <input type="hidden" name="skills" id="skills">
</div>

選択されたタグは、inputのskillsにカンマ区切りで入力されます。

自動補完の選択肢を配列に保存

<script>
var dataTags = [
"日本",
"Iceland",
"Ireland"
];
</script>

Input_Tagを読み込む

<script src="input_tag.js"></script>
SPONSOR

どのような仕組みなの?

自動補完部分についてはjQuery UIのautocompleteを利用しました。そこから、選択されたものをタグとしてペタッと貼り付けたりするところを追加で作りました。

下のように、タグは選択された時にdivで追加。その後ろにinputがあります。タグがどんどん追加されたら、inputは後ろに下がっていきます。
kaisetu

githubで公開してますので、自由にご利用ください。
Input_Tag

フリーランスエンジニアの稼ぎ方

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は1ヶ月と10日で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす