PeaceJet

証券会社で証券外務員をやりながら、マーケティングやデータ分析・UI/UX改善などを行っています。

【Ruby on Rails】MaterializeのChips(Tags)で結構ハマったはなし

Materialize

Materialize Chips

タグ機能の実装について、いろいろと試行錯誤しています。
その中で、Materializeを使用させていただいているのですが、標準のタグ機能だと結構ややこしい処理をしないと値を取ってこれなかったのでメモします。

※注意:返却される値が、配列に格納されたハッシュですので、そのような機能を実装しているのでしたら、Materializeのタグ機能を余すところなく使えると思います。
例としては以下のようなものです。

[
  {tag: "テスト"},
  {tag: "テスト"}
]

Chips

htmlを書いていきます。

<div class="chips chips-initial chips-placeholder">
</div>
<%= f.input_field :tag_list, id: :tag_list %>

javascriptも、必要に応じて取捨選択し書いていきます。

$('.chips').material_chip();
$('.chips-initial').material_chip({
  data: [{
    tag: 'Apple',
  }, {
    tag: 'Microsoft',
  }, {
    tag: 'Google',
  }],
});
$('.chips-placeholder').material_chip({
  placeholder: 'Enter a tag',
  secondaryPlaceholder: '+Tag',
});
$('.chips-autocomplete').material_chip({
  autocompleteOptions: {
    data: {
      'Apple': null,
      'Microsoft': null,
      'Google': null
    },
    limit: Infinity,
    minLength: 1
  }
});

以下のように記述すると、カンマ区切りの値を得ることができます。
「テスト,テスト」のような感じです。

$('.chips').on('chip.add chip.delete', function(e, chip){
  var x = $('.chips').material_chip('data');
  var z = [];
  $.each(x, function(index, elem) { z.push(elem.tag) });
  $("#tag_list").val(z)
})

もっと、高レイヤーでのやり方があれば良いのですが見当たらず・・・。

The Site of Materialize

materializecss.com

/* ブログタイトルを取得 */