[javascript] MediumEditor에서 텍스트 자동 완성 기능 추가하기

30 Nov 2023

javascript

이 문서에서는 MediumEditor에서 텍스트 자동 완성 기능을 추가하는 방법에 대해 알아보겠습니다.

개요

MediumEditor는 사용자가 텍스트를 입력하는 동안 자동 완성 기능을 제공하지 않습니다. 그러나 우리는 JavaScript를 사용하여 이 기능을 구현할 수 있습니다.

구현 방법

자동 완성 기능을 추가하는 방법은 다음과 같습니다.

MediumEditor를 초기화합니다.
텍스트 입력 이벤트를 감지하여 입력된 텍스트를 검사합니다.
자동 완성 기능을 위한 데이터를 준비합니다.
입력된 텍스트와 데이터를 비교하여 일치하는 항목을 찾습니다.
일치하는 항목이 있을 경우, 자동 완성 기능을 활성화하고 결과를 표시합니다.

다음은 JavaScript로 이 기능을 구현한 예입니다.

var editor = new MediumEditor('.editable');

editor.subscribe('editableInput', function(event, editable) {
  var inputValue = editable.textContent;
  var autoCompleteData = ['apple', 'banana', 'cherry', 'orange'];

  var matchingItems = autoCompleteData.filter(function(item) {
    return item.indexOf(inputValue) === 0;
  });

  if (inputValue && matchingItems.length > 0) {
    var autoCompleteBox = document.createElement('ul');
    matchingItems.forEach(function(item) {
      var listItem = document.createElement('li');
      listItem.textContent = item;
      autoCompleteBox.appendChild(listItem);
    });

    var editorElement = editable.parentElement;
    editorElement.appendChild(autoCompleteBox);
  }
});

위의 코드에서는 .editable 클래스를 가진 모든 엘리먼트에 MediumEditor를 적용하고, editableInput 이벤트를 구독하여 텍스트 입력을 감지합니다. 입력된 텍스트와 사전에 정의된 자동 완성 데이터를 비교하고, 일치하는 항목이 있다면 결과를 화면에 표시합니다.

결론

MediumEditor에 텍스트 자동 완성 기능을 추가하는 방법을 알아보았습니다. 이를 응용하여 사용자에게 더 편리한 편집 환경을 제공할 수 있습니다. 자동 완성 데이터와 표시 방식을 자유롭게 수정하여 원하는 기능을 추가할 수도 있습니다.