## 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; ~~~