如何在CodeMirror中实现实时自动补全功能？

当然可以实现！CodeMirror的show-hint插件完全支持改造为实时自动补全模式，不用只依赖快捷键触发。我之前做过类似的需求，给你分享具体的实现思路和代码：

核心思路 #

show-hint插件本身提供了CodeMirror.showHint()方法来手动唤起提示框，我们只需要监听编辑器的输入事件，在用户输入关键词首字母（或符合条件的内容）时，自动调用这个方法即可。

步骤1：确保引入必要的文件 #

首先要确保你已经引入了CodeMirror的核心文件和show-hint相关资源：

• codemirror.css（核心样式）
• show-hint.css（补全提示框的样式）
• codemirror.js（核心逻辑）
• show-hint.js（补全插件）
• 对应语言的补全脚本（比如JavaScript的javascript-hint.js，HTML的html-hint.js，如果是自定义语言则需要自己实现hint函数）

步骤2：初始化编辑器并配置基础选项 #

先正常初始化编辑器，你可以保留原有的快捷键配置（比如Ctrl+Space手动唤起），不影响自动补全的逻辑：

const editor = CodeMirror.fromTextArea(document.getElementById('your-textarea-id'), {
  lineNumbers: true,
  mode: 'javascript', // 根据你的实际语言类型调整，比如'html'/'css'
  extraKeys: {
    'Ctrl-Space': 'autocomplete' // 保留手动触发的快捷键，可选
  }
});

步骤3：监听输入事件，自动触发补全 #

我们用inputRead事件来监听用户的输入操作（这个事件比change更精准，只会在用户输入文本时触发，不会捕获删除、光标移动等操作），然后在回调里判断输入内容是否符合触发条件，再唤起提示框：

// 监听输入事件，自动触发补全
editor.on('inputRead', function(cm, change) {
  // 只在输入字母、数字或下划线时触发，避免无效操作唤起提示
  const inputChar = change.text[0];
  if (/[a-zA-Z0-9_]/.test(inputChar)) {
    // 可以添加额外条件，比如输入至少2个字符再触发，避免首字母就弹出太多提示
    const cursor = cm.getCursor();
    const currentLine = cm.getLine(cursor.line);
    const currentWord = currentLine.slice(0, cursor.ch).match(/\w*$/)[0];
    
    if (currentWord.length >= 1) { // 这里设为1就是首字母触发，按需调整
      CodeMirror.showHint(cm, CodeMirror.javascriptHint, {
        completeSingle: false // 关闭单个候选自动补全，避免不小心替换内容
      });
    }
  }
});

优化建议 #

• 防抖处理：如果担心输入频繁导致性能问题，可以加个防抖函数，避免短时间内多次调用补全方法：

let debounceTimer = null;
editor.on('inputRead', function(cm, change) {
  const inputChar = change.text[0];
  if (/[a-zA-Z0-9_]/.test(inputChar)) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      const cursor = cm.getCursor();
      const currentLine = cm.getLine(cursor.line);
      const currentWord = currentLine.slice(0, cursor.ch).match(/\w*$/)[0];
      
      if (currentWord.length >= 1) {
        CodeMirror.showHint(cm, CodeMirror.javascriptHint, { completeSingle: false });
      }
    }, 100); // 100ms延迟，按需调整
  }
});

• 自定义补全逻辑：如果是自定义语言或业务专属的补全规则，可以自己写hint函数，替换示例中的CodeMirror.javascriptHint即可，hint函数需要返回包含list（候选词数组）的对象。

这样设置后，用户输入关键词首字母时，补全提示框就会自动弹出来了，完全满足你的需求！

内容的提问来源于stack exchange，提问作者Eugene Krakos