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等其余效果后面分享。