使用codemirror使用SQL代碼能夠自動提示如 PLSQL等工具一般智能提示功能，

1、引入show-hint.css，codemirror.css和主題樣式如：

<link href="codemirror-5.47.0/lib/codemirror.css"/><link href="codemirror-5.47.0/theme/monokai.css"/><link href="codemirror-5.47.0/theme/eclipse.css"/><link href="codemirror-5.47.0/theme/idea.css"/><link href="codemirror-5.47.0/addon/hint/show-hint.css"/><link href="codemirror-5.47.0/addon/display/fullscreen.css"/>

2、引入codemirror.js、sql.js、show-hint.js、sql-hint.js

如：

codemirror-5.47.0/lib/codemirror.jscodemirror-5.47.0/mode/sql/sql.jscodemirror-5.47.0/mode/clike/clike.jscodemirror-5.47.0/addon/display/autorefresh.jscodemirror-5.47.0/addon/edit/matchbrackets.jscodemirror-5.47.0/addon/selection/active-line.jscodemirror-5.47.0/addon/display/fullscreen.jscodemirror-5.47.0/addon/hint/show-hint.jscodemirror-5.47.0/addon/hint/sql-hint.js

3、設置初始化codemirror，并設置table和列數據源

/*** codemirror集成配置工具類 Created by 許暢 on 2019-05-27.** codemirror代碼配置：* <pre>* CodeMirror.resolveMode("text/x-sql").keywords["left join"]=true* CodeMirror.resolveMode("text/x-sql").keywords["left"]=true* CodeMirror.resolveMode("text/x-sql").keywords["right join"]=true* CodeMirror.resolveMode("text/x-sql").keywords["right"]=true* CodeMirror.resolveMode("text/x-sql").keywords["inner join"]=true* CodeMirror.resolveMode("text/x-sql").keywords["inner"]=true* CodeMirror.resolveMode("text/x-sql").keywords["when"]=true* CodeMirror.resolveMode("text/x-sql").keywords["FROM_DAYS(N)"]=true* CodeMirror.resolveMode("text/x-sql").keywords["UPGRADE"]=true* * sqlCodeMirror = CodeMirror.fromTextArea(document.getElementById("sqlTest"),{* mode: "text/x-sql",* theme : "idea",* lineNumbers : true,* lineWrapping: true,* styleActiveLine: true,* matchBrackets: true,* autoRefresh : true,* extraKeys: {* "Alt-/": "autocomplete",* "F11": function(cm) {* cm.setOption("fullScreen", !cm.getOption("fullScreen"));* },* "Esc": function(cm) {* if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);* } * }, // To invoke the auto complete* hint: CodeMirror.hint.sql,* hintOptions: {* tables: {* "t_test_login": [ "col_a", "col_B", "col_C" ],* "t_test_employee": [ "other_columns1", "other_columns2" ]* }* }* });* sqlCodeMirror.setValue("select * from t_test_login where 1=1");* * sqlCodeMirror.on("change", function(editor, change) {* if (change.origin == "+input"){* var textArray = change.text;* //不提示* if(!ignoreInputCode(textArray)){* setTimeout(function() { editor.execCommand("autocomplete"); }, 100);* }* }* });* </pre>*/

更新詳細配置可參考其官方說明，可參照其demo說明。

總結

以上是生活随笔為你收集整理的codemirror实现SQL代码自动提示功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。