TextComplete 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00281/article/details/141418604

TextComplete 开源项目教程

textcompleteAutocomplete for HTMLTextAreaElement and more.项目地址:https://gitcode.com/gh_mirrors/te/textcomplete

项目介绍

TextComplete 是一个用于在文本编辑器中实现自动补全功能的 JavaScript 库。它支持多种编辑器，如 textarea 和 contenteditable 元素，并且可以通过简单的配置实现自定义的自动补全功能。TextComplete 的设计目标是轻量级和易于集成，适用于需要快速实现文本自动补全功能的场景。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 TextComplete：

npm install textcomplete

或者

yarn add textcomplete

基本使用

以下是一个简单的示例，展示如何在 textarea 中使用 TextComplete：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TextComplete 示例</title>
  <link rel="stylesheet" href="path/to/textcomplete.css">
</head>
<body>
  <textarea id="editor" rows="10" cols="50"></textarea>

  <script src="path/to/textcomplete.js"></script>
  <script>
    const editor = document.getElementById('editor');
    const textcomplete = new Textcomplete(editor, {
      strategy: [
        {
          match: /(\s|^)@(\w*)$/,
          search: (term, callback) => {
            callback(['user1', 'user2', 'user3'].filter(user => user.startsWith(term)));
          },
          replace: (user) => `@${user} `
        }
      ]
    });
  </script>
</body>
</html>