codeMirror自动补全(sql)元数据结构提示 动态提示库下面的表名 表下的字段名

Vue中codeMirror自动补全(元数据库>表>字段联想提示)

参考文档(codeMirror使用说明说)
codeMirror官网
需求: 在输入sql时,可以根据元数据自动提示某个库下面所有的表和字段(例如: hive.table.field)当我输入hive. 会自动提示后面所有的table选项.往后同理.具体效果如下图

实现方法:

第一步,引入codeMirror 必须文件和自动提示插件

// 引入全局实例
import _CodeMirror from 'codemirror';

// 核心样式
import 'codemirror/lib/codemirror.css';
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/blackboard.css';
import 'codemirror/theme/cobalt.css';
import 'codemirror/addon/display/fullscreen.css'; // 全屏显示编辑器
import 'codemirror/addon/display/fullscreen.js'; // 全屏显示编辑器

// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/mode/clike/clike.js';
import 'codemirror/mode/markdown/markdown.js';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/r/r.js';
import 'codemirror/mode/shell/shell.js';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/mode/swift/swift.js';
import 'codemirror/mode/vue/vue.js';

// 引入代码自动提示插件
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/show-hint';

第二步,定义codeMirror配置项,extraKeys(触发按键) 和 hintOptions(自定义提示) 这两个属性,hintOptions的tables属性里面就是我们具体要提示的内容,tables中的key值是表名,数组中的是该表内所有的字段名注意: 强烈建议将hintOptions下的completeSingle属性设置为false,要不然只有一个选项的时候会自动选中

 // 默认配置
          options: {
     
              // 缩进格式
              tabSize: 2,
              // 主题，对应主题库 JS 需要提前引入
              theme: 'cobalt',
              // 显示行号
              lineNumbers: true,
              line: true,
              readOnly: true,
              extraKeys: {
      // 触发按键
                  'Ctrl': 'autocomplete'
              },
              hintOptions: {
      // 自定义提示选项
                  completeSingle: false, // 当匹配只有一项的时候是否自动补全
                  tables: {
     
                      users: ['name', 'score', 'birthDate'],
                      countries: ['name', 'population', 'size'],
                      score: ['zooao']
                  }
              }
             
          },

第三步,添加自动提示事件,在这个地方我看有很多不同的方法,有用到"cursorActivity"事件的,该事件是只要编辑器内容有改动就会触发,由于我这边会有读取内容到编辑器内这种操作,会触发该事件,所以我选择用下面的"keypress"事件

 this.coder.on('keypress', () => {
  //编译器内容更改事件
       this.coder.showHint();
   });

到这一步,基本上已经可以实现表>字段的关联提示了,但是我这边需求是库>表>字段的提示,有三层嵌套,但是tables只能联想到两级,查阅文档大多数都是需要修改showHint或者sql-hint文件中的方法之类的.比较复杂,在这提供一个比较笨但是相对简单的方法.将库+表的所有组合列出来作为tables的key,对应的数组则为该库表下的字段(或者将库作为key,表+字段作为值),具体如下

 this.coder.setOption('hintOptions', { // 自定义提示选项
     completeSingle: false, // 当匹配只有一项的时候是否自动补全
     tables: { 'hive.table': ['filed'] }
 });

效果如下图: