태그 입력 후 외형을 잘합시다.

제목대로 Bootstrap 4 Tag Input Plugin With jQuery를 사용하여 태그 입력 후의 외형을 잘 해 나갑니다.
(2회째의) 첫 투고이므로 오자나 탈자 등 이르지 않는 점은 있다고 생각합니다만, 잘 부탁드리겠습니다.

완성형

현재의 태그 입력 기능은 아래와 같은 느낌입니다만, 이대로라면 살 풍경이므로


↓처럼 입력 후 깨끗하게 장식되도록 해 봅시다.
또한 엔터 키에서도 태그를 등록 할 수 있습니다.

전제

Rails 6.0.3.5
Bootstrap 4.5
jQuery 도입됨
태그 기능 구현

Bootstrap 4 Tag Input Plugin With jQuery 소개

Bootstrap 4 Tag Input Plugin With jQuery 공식 사이트

위의 공식 페이지에서 다운로드하십시오.

해동하면
Bootstrap-4-Tag-Input-Plugin-jQuery라는 디렉토리가 있습니다.
디렉토리의
tagsinput.js
을
app/javascripts
에
tagsinput.css
을
tagsinput.scss
로 이름을 바꾸고
app/javascripts/stylesheets
가자.

tagsinput.js를 읽을 수 있도록 작성합니다.

application.js

require('jquery')
require('tagsinput') //←これを追加します

tagsinput.scss를 로드하기 위한 설명도 합니다.

application.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import 'tagsinput'; //←これを追加します。

도입은 이것으로 끝입니다.

데이터를 data-role로 보내 tagsinput을 시작하자.

태그 입력 양식에 data-role을 추가합니다.

new.html.erb

<div class="tags">
  <%= f.label :tag_list %>
  <%= text_field_tag 'post[tag_list]', @post.tag_list, data: {role: "tagsinput"} %>   # ←を追加  
</div>

이것으로

처럼 태그 입력 후 장식됩니다!

조금 설정을 변경합시다.

현재 상태라면 태그가 무한히 등록할 수 있습니다.

추가할 수 있는 태그 수와 최대 문자 수를 설정합시다.
tagsinput.js의 내용을 살펴 보겠습니다.

tagsinput.js

    maxTags: undefined,
    maxChars: undefined,

이쪽을 보면 태그의 문자수의 묶음도 없는 것을 알 수 있군요! ! !
여기를 바꿔 봅시다.

tagsinput.js

    maxTags: 4,
    maxChars: 8,

태그의 최대수 4와 최대 문자수 8로 설정할 수 있었습니다.



↑반각 영수라면 좋지만 전각 입력시 입력 화면에 어긋남이 나옵니다.
여기를 고쳐 봅시다.

tagsinput.js

    this.inputSize = Math.max(1, this.placeholderText.length);

여기를

tagsinput.js

    this.inputSize = Math.max(20, this.placeholderText.length);

되돌아 봅시다.


좋은 느낌이 들었습니다! ! !

마지막으로

소개하기 위해 다양한 오류와 싸웠습니다 orz
bootstrap-tagsinput

처음에는 여기를 도입하려고했지만 오래되었기 때문에 꽤 잘 가지 않고 orz
또한 Tag it의 도입도 잘되지 않고 orz
여러 가지를 찾아서 여기에 도착했습니다.

또한 Bootstrap 4 Tag Input Plugin With jQuery에 대한 일본어 문헌이 없으며 옵션 등에 대한 영어 공식을 참고했습니다.
영어라고 해서 서투른 의식을 가지지 않는다. 제대로 읽는 것의 중요성을 알았습니다 (느린)
드디어 gif 마크다운 기법이 있다는 것을 처음으로 알게 되었습니다(느린)

이상이 됩니다. 망설이는 글이지만 읽어 주셔서 감사합니다.