input 태그에 선택한 항목이 label로 출력되게 해주는 choices.js 소개

현재 공부하려고 개인적으로 만들고 있는 프로젝트 위들포스에서 사용자를 검색하고 input 박스위에 레이블처럼 보여주는 기능이 필요했다.

 

아무리 찾아보아도 좋은 라이브러리가 없었는데 choices.js의 이미지를 보니 좀 좋아보여서 적용해 보았다.

우선 내 프로젝트에 적용된 하면은 이렇다.

 

[홈페이지 및 github]

https://joshuajohnson.co.uk/Choices/

https://github.com/jshjohnson/Choices

홈페이지에는 예제가 여러개 나열되어 있고, 필요에 따라 소스보기를 통해 참고할 수 있다. github에는 document가 있어서 사용할 수 있는 속성들이 나열되어 있다.

 

[사용방법]

간단한 사용방법은 github에서 소스를 받거나 npm install choices.js를 통해 소스를  내려받을 수 있다.

필수로 필요한 파일은 assets/script/dist/choices.js와 icon, image, base.css, choices.css가 필요하다.

 

페이지에서 <script>와 <link>를 통해서 로드를 하거나 웹팩에서 import를 사용하여 가져올 수 있다. 그리고 html페이지에 input 태그를 하나 생성하고 다음과 같이 적용하면 된다.

<!-- html -->
<div id="messageTargetSearch">
  <div id="messageTargetLabel">
    <label for="messageTargetInput"><spring:message code="message.title.user"/></label>
 </div>
 <input id="messageTargetInput" class="form-control" type="text" placeholder="Search..">
</div>


<!-- javascript -->
const messageTargetInput = document.getElementById('messageTargetInput');
const choices = new Choices(messageTargetInput, {
  delimiter: ',',
  editItems: true,
  maxItemCount: 1,
  removeItemButton: true,
  addItemText: function(value) {
    return 'Please Enter to add user <b>"' + String(value) + '"</b>';
  },
});

delimiter, editItems등 기타 옵션들은 github 페이지에 가면 자세히 나열되어 있다.

그리고 이벤트를 등록하려면 여러가지 이벤트들이 제공이 되는데 addItem과 removeItem에 대한 소스만 잠깐보자. 이게 적용이 되기전 그러니까 추가 또는 삭제가 되기전에 이벤트를 잡아주면 좋은데 그렇지 못해서 나는 따로 validate검사를 하고 validate가 적합하지 않으면 다시 추가 또는 제거해주는 코드를 별도로 넣었다. 좋은 방법이 있으면 추천 바랍니다~

messageTargetInput.addEventListener('addItem', (event) => {
  // do something creative here...
  console.log(event.detail.id);
  console.log(event.detail.value);
  console.log(event.detail.label);
  console.log(event.detail.groupValue);
  //choices.removeItemsByValue(event.detail.value);
}, false);

messageTargetInput.addEventListener('removeItem', (event) => {

  if (!confirm(Common.getMessage('message.message.close'))) {
    choices.setValue([
      {value: event.detail.value, label: event.detail.label}
    ]);
  }

  // do something creative here...
  console.log(event.detail.id);
  console.log(event.detail.value);
  console.log(event.detail.label);
  console.log(event.detail.groupValue);

}, false);

아쉬운건 아이콘을 svg파일을 사용하는데 webpack에서 svg loader를 적용하여도 정상적으로 로드가 되지 않아서 좀 애를 먹었다. 

다른사람들도 검색해보니 동일한 문제를 겪은 사람이 있는데 해결은 안되었다. 아래 URL 참고

https://github.com/jshjohnson/Choices/issues/223

 

보시는분들중 이런 라이브러리들이 좋은게 있으면 추천 부탁드립니다.