caret.js 와 atwho.js 이용하여 게시물에서 @로 친구리스트 불러오기 (autocomplete 활용)

페이스북이나 인스타그램처럼, 태그(@) 를 이용하여 친구리스트를 댓글에 불러올 수 있도록 하는 기능을 구현했다 !

Friend 테이블에서 FriendId 만을 추출하여 JSON 형식으로 만들고, 댓글폼에서 @를 입력하면 Ajax 로 리스트를 불러와 띄워주는 예제다.

해당 기능 사용을 위해 caret.js 와 atwho.js 를 같이 사용하였다.

Caret.js Git 주소 : https://github.com/ichord/Caret.js

Atwho.js Git 주소 : https://github.com/ichord/At.js

해당 예제는 국내 포스팅도 없고 검색 데이터도 별로없었지만 내가 사용할 textarea 에 적용이 가능하고, 사용방법이 편한 점에서 공부하고 적용했다 (뿌듯)

* 사용방법 *

1. HTML 상단에 해당 기능 사용을 위한 CDN 추가

(각 JS와 CSS는 Git에서 가져올 수 있지만, 필요하신 분들을 위해 파일공유해요)    atwho.css   atwho.js   caret.js

<!-- 친구리스트 오토컴플릿에 필요한 Caret.js -->
<script src="/javascript/caret.js"></script>
<!-- 친구리스트 오토컴플릿에 필요한 atwho.js -->
<script src="/javascript/atwho.js"></script>
<!--친구리스트 오토컴플릿에 필요한 atwho.css -->
<link href="/css/atwho.css" rel="stylesheet">

2. BODY 부분에 해당 기능을 활용할 textarea 선언

<textarea id="commContent" name="commContent" placeholder="댓글을 입력해주세요.."}></textarea>

3. 실제 동작하는 JAVASCRIPT 부분

 //*댓글 입력
$("textarea").on("keyup", function(event){
   //autocomplete
   $(this).atwho({
        at: "@",
        data: null,
        callbacks: {
          remoteFilter: function(query, callback){
            $.getJSON('/friend/json/listFriendFromBoard/${sessionScope.user.userId}', function(data){
              console.log(data);
              callback(data);
            });
          }
        }
    });
   //comment submit
   if (event.which==13) {
      ...
   }
})