CodeMirror-SQLHint (autocomplete) 使用

簡單描述下使用場景，應用須要提供一個簡單的SQL查詢窗口，可以高亮顯示SQL語法便可。

1. 獲取代碼配置依賴

到codemirror官網上下載下來一套代碼，將lib下的codemirror.js、codemirror.css文件和mode/sql文件夾下的sql.js文件導入到頁面中。lib是codemirror的lib，mode是當前使用的語言模式，即SQL語言，mode中的js包內容大多爲當前語言的關鍵字或格式解析等相關代碼。

2. 如何使用

下面的代碼展現瞭如何初始化一個codemirror，以及相關參數配置釋義。

<!-- Create a simple CodeMirror instance -->
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="mode/sql/sql.js"></script>
<script>
 var editor = CodeMirror.fromTextArea(myTextarea, {
   lineNumbers: true,//設置行號 boolean
   value: 'SELECT * FROM table',//編輯框初始值 string    
   mode: 'text/x-mysql',//當前code模式 模式的選擇能夠在CodeMirror.modes中查看
   height: 128,//高度
   indentUnit: 4,//縮進塊用多少個空格表示 默認是2
   autofocus: true,
   extraKeys: {//快捷鍵 可提供三種模式 sublime、emacs、vim。 使用時須要引入js支持包
       "F9": function (editor) {
           format(editor);
       },
       "F8": function (editor) {
           query(editor);
       }
       }
   
 });
 var sql='SELECT * FROM table';
 editor.setValue(sql);
 editor.setCursor(sql.length);
 editor.getValue();
 
</script>

至此，寫SQL語句時就用上codemirror插件了。一樣的想要其餘語言的支持，只須要配置上不一樣的語言模式包就能夠了。

3. 使用SQL Hint(autocomplete)

在寫SQL時候想要實現相似idea自動提示提升效率的功能，codemirror的autocomplete插件可以幫到你們。首先須要導入自動提示的依賴包：show-hint.js、show-hint.css以及SQL提示的依賴包：sql-hint.js . 依賴包導入後還差一項配置就能夠了。須要配置在什麼樣的時機觸發自動提示。

editor.on("change", function(editor, change) {//任意鍵觸發autocomplete
                   if (change.origin == "+input"){
                       var text = change.text;
                       if(!ignoreToken(text))//不提示
                       setTimeout(function() { editor.execCommand("autocomplete"); }, 20);
                   }
               });

從上面的代碼中能夠看到是在editor發生輸入變化的時候執行了自動提示的命令。讀者能夠使用其餘方法或時機觸發提示。 在實踐過程當中發現並非全部的按鍵都須要提示，ignoreToken(string token)方法即解決這個問題，方法內爲數組對象，返回true/false表明是否須要自動提示。 SQL語句中屬於動態數據的部分就是表和列數據了，可以提示這些信息會給用戶輸入代碼極大的便捷，codemirror的hint功能支持該特性。使用hintOptions 屬性定義tables和列相關內容便可。

hintOptions:{
                tables: {
                    table1: ['name', 'score', 'birthDate'],
                    table2: ['name', 'population', 'size']
                }
            }

至此，SQL的關鍵字高亮、關鍵字提示、表、列提示都ok了。效果以下，該圖中的icon等其餘效果後面分享。