## ACE.js 自定义代码提示 >时间：2016-09-09 14:15:41 >作者：zhongxia >源码地址：https://github.com/ajaxorg/ace Ace.js是一款开源的 web编辑器，内置强大的代码提示，快捷键功能。具体了解看官网介绍。 ## 一、背景 由于在产品中，需要用到 输入 `数据库名.` 弹出数据库下所有表的提示框， 方便用户的使用。 如图：  ## 解决方案 ### 1、使用ACE.js的提示框，替换提示数据【**还未实现**】 >在ACE.js上进行扩展，异步获取到表名数据，然后使用ACE 自带的提示框，提示， 这个是一个比较好的解决方案，但是需要去了解下ACE自定义提示是如何实现的，然后进行扩展。 目前还没有研究透。 参考文章 1. [ACE自定义提示如何实现？](http://wsztrush.github.io/%E7%BC%96%E7%A8%8B%E6%8A%80%E6%9C%AF/2015/11/06/ACEJS-B.html?utm_source=tuicool&utm_medium=referral) ### 2、监听ACE的change事件[**如效果图一样**] >如果遇到 `xxx.`这种情况，就把关键字`xxx`取出，然后去Ajax获取表名列表。 自己实现一个提示框的插件，然后在指定的位置弹出。 ~~~ //获取当前焦点的位置（提示框使用 position:fixed） let renderer = editor.renderer; var pos = renderer.$cursorLayer.getPixelPosition(this.base, true); var rect = editor.container.getBoundingClientRect(); pos.top += rect.top - renderer.layerConfig.offset; pos.left += rect.left - editor.renderer.scrollLeft; pos.left += renderer.gutterWidth; ~~~