jQuery.textcomplete ( 프레젠테이션 )

GitHub와 같은 textarea 보완 기능을 사용하여 커서 위치 가져오기쓴 것도 예전 일이고 언젠가는 계속 쓰고 싶은데 눈치채면 5개월이 지났어요
왠지 뒷글을 쓰는 게 귀찮고 한 일본 최대 레시피 공유 사이트의 기술부장으로부터'OSS가 됐으면 좋겠다'는 부탁을 받아 OSS화를 하게 됐다.

라이센스

IT 라이센스

간단한 사용 방법

간단히 설명할게요.자세한 내용은 읽으십시오README.
우선 jQuery.textcomplete는 이름에서도 알 수 있듯이 jQuery 플러그인이기 때문에 다른 jQuery가 필요합니다.

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.textcomplete.js"></script>

TEXTAREA 요소의 jQuery 객체textcomplete 메서드를 실행합니다.

$('textarea').textcomplete({
    // mentionは単なる名前で意味はありません。
    // 分かりやすい名前をつけてください。
    mention: {
        // 必須設定
        match: /(^|\s)@(\w*)$/,
        search: function (term, callback) {
            // callback には文字列の配列を渡す
            $.getJSON('/search', { q: term })
                .done(function (resp) { callback(resp); })
                .fail(function ()     { callback([]);   });
        },
        replace: function (value) {
            return '$1@' + value + ' ';
        },

        // 任意設定（下記はいずれもデフォルト値）
        index: 2,
        maxCount: 10,
        template: function (value) {
            return value;
        }
    },
    // 複数設定することもできます
    emoji: { … }
});

match 각 Keyup 이벤트에서 TEXTAREA의 시작부터 커서 위치까지 사용할 문자열의 정규 표현식을 지정합니다.이 정규 표현식이 일치하면 index 그룹을 search 의 첫 번째 매개 변수 term 로 전달합니다.search 주어진 term 에 대응하는 문자열 그룹을 만듭니다callback.이 예에서, 우리는 jQuery.getJSON 를 사용하여 원격에서 데이터를 얻는다.이번 예처럼 search 중 비동기 처리가 있어도 search 한 번만 동시에 실행할 수 있다.또한 그룹에 100개의 원소가 있어도 처음부터 maxCount개만 표시됩니다.
실행callback 시 주어진 그룹의 각 요소template를 실행합니다.이 함수의 반환값은 완성된 모든 요소입니다.위에 붙여진gif의 경우 보충 메뉴에 그림을 삽입합니다. 이 점을 실현하기 위해서입니다. 예를 들어 다음과 같습니다.

template: function (value) {
    return '<img src="path/to/' + value + '.png"/>' + value;
}

최종 확정 완료 시 replace 선택한 값이 표시되고 실행됩니다.이 함수의 반환값은 아래와 같습니다. 견본을 참고하여 만족 조건을 지정하십시오.String.replace에 대한 상세한 규격은 String.replace - JavaScript | MDN 을 참조하십시오.

textarea.value = textarea.value.replace(matchRegExp, replaceFunc(value));

디자인

출력된 보완 메뉴는 Bootstrap의 Dropdown과 동일한 HTML 구조를 갖습니다.따라서 Bootstrap을 사용하는 환경에서 아무것도 하지 않는 느낌에 마음대로 적응할 수 있다.
Bootstrap을 사용하지 않으면 Bootstrap의 Dropdown을 참조하여 스타일을 작성합니다.저장소에 jquery가 있습니다.textcomplete.css라는 파일이 있기 때문에 그것을 기초로 사용하는 것이 좋을 수 있습니다.

구현 예정 기능

모호 검색 기능
모든 사용자는 search 함수를 실현해야 합니다. 그 중에서 사용할 수 있는 모호한 검색용 내장 함수를 준비하고 싶습니다.

search: function (term, callback) {
    var data = this.fuzzySearch(term, /* データ配列 */);
    callback(data);
}

이렇게 쓰면 아무렇게나 검색하는 인상을 준다.