멘션 기능 구현을 위한 생각 > 블로그(Blog)

Gnuboard 멘션 기능 구현을 위한 생각

페이지 정보

작성자 Docker
댓글 0건 조회 250회 작성일 20-07-30 11:46

본문

한글 초성 ajax 처리 참조.

[http://www.gnujava.com/board/article_view.jsp?article_no=5275&menu_cd=24&board_no=11&table_cd=EPAR04&table_no=04](http://www.gnujava.com/board/article_view.jsp?article_no=5275&menu_cd=24&board_no=11&table_cd=EPAR04&table_no=04)

그누보드의 member 테이블을 읽어 옴

```
$key = strip_tags($_POST['key']);
$sql = " select mb_id, mb_nick from {$g5['member_table']} where mb_nick like '%$key%';
$row = sql_fetch($sql);

// 아이콘 가져오기
$mb_dir = substr($mb['mb_id'],0,2);
$icon_file = G5_DATA_PATH.'/member/'.$mb_dir.'/'.get_mb_icon_name($mb['mb_id']).'.gif';

```

ajax는

```
<script>
function getNickName(key){
  $.ajax({
      url: g5_bbs_url+"/ajax.nickname.php",
      type: "POST",
      data: {
          "key": key,
      },
      dataType: "json",
      async: false,
      cache: false,
      success: function(data, textStatus) {
          subject = data.subject;
          content = data.content;
      }
    });
 }
</script>
```

https://stackoverflow.com/questions/51527531/fetch-dynamically-selected-data-from-database-using-ajax-php

SIR에서 사용하는 스크립트

```
<script>
(function($){
    var cachequeryMentions = [],
        itemsMentions = null,
        data_url = "//sir.kr/plugin/mention/q.php",
        limit = (typeof g5_is_mobile != "undefined" && g5_is_mobile ) ? 4 : 10;

$('#wr_content').atwho({
        at: "@",
        data: null,
        displayTpl: "<li>${img} ${name} </li>",
        limit: limit,
        callbacks: {
            filter: function (query, data, searchKey){
                var _results, i, item, len;
                _results = [];

return _results;
            },
            remoteFilter: function (query, render_view) {
                var thisVal = query,
                self = $(this);
                if( !self.data('active') && thisVal.length >= 1 ){
                    self.data('active', true);                    
                    itemsMentions = cachequeryMentions[thisVal]
                    if(typeof itemsMentions == "object"){
                        render_view(itemsMentions);
                    }else
                    {                    
                        if (self.xhr) {
                            self.xhr.abort();
                        }
                        self.xhr = $.getJSON( data_url ,{
                            s: thisVal
                        }, function(data) {
                            cachequeryMentions[thisVal] = data;
                            render_view(data);
                        });
                    }                    
                    self.data('active', false);                    
                }            
            },
            sorter: function(query, items, searchKey) {
                var _results, i, item, len;
                if (!query) {
                  return items;
                }
                _results = [];
                for (i = 0, len = items.length; i < len; i++) {
                    item = items[i];
                    item.atwho_order = new String(item[searchKey]).toLowerCase().indexOf(query.toLowerCase());
                    var pattern = /([ㄱ-ㅎ])/i;     //한글 초성은 체크하지 않습니다.
                    if (pattern.test(query)) {
                        _results.push(item);
                    } else {
                        if (item.atwho_order > -1) {
                            _results.push(item);
                        }
                    }
                }
                return _results.sort(function(a, b) {
                  return a.atwho_order - b.atwho_order;
                });
            },
            matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
                var _a, _y, match, regexp, space;
                flag = flag.replace(/[\-\[\]\/\{\}\*\+\?\.\\\^\$\|]/g, "\\$&");
                if (should_startWithSpace) {
                    flag = '(?:^|\\s)' + flag;
                }
                _a = decodeURI("%C3%80");
                _y = decodeURI("%C3%BF");
                space = acceptSpaceBar ? "\ " : "";
                regexp = new RegExp(flag + "([가-힣ㄱ-ㅎA-Za-z" + _a + "-" + _y + "0-9_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');
                match = regexp.exec(subtext);

if (match) {

var patt = /^\.+/gi;

if( match[1] && patt.test(match[1]) ){
                        return null;
                    }

return match[2] || match[1];
                } else {
                    return null;
                }
            },
        }
    });
})(jQuery);
</script>
```

> file은 /plugin/mention/q.php에서 읽어옴.

https://ourcodeworld.com/articles/read/516/how-to-create-a-mentions-autocomplete-with-jquery-and-atwho

https://github.com/zurb/tribute

이전글마크다운 에디터에서 이미지 클릭시에 크게 만들기(그누보드) 20.08.02
다음글그누보드 순정에 에디터 2개 사용하기 20.07.29

댓글목록

등록된 댓글이 없습니다.

멘션 기능 구현을 위한 생각 > 블로그(Blog)

인기검색어

블로그(Blog)

Gnuboard 멘션 기능 구현을 위한 생각

페이지 정보

본문

댓글목록

회원로그인

사이트 정보

접속자집계