CodeMirror sql智能提示功能修改

CodeMirror sql部分智能提示關鍵字,老闆希望可以自己加提示,還能支持 庫.表.字段  下面我就說下我具體的做法：

第一步瞭解 codemirror的實現原理，

   

  看這個很容易看出點啥，codemirror.js 主要是框架和配置類，show-hint.js 主要是顯示提示框的類；

      剩下的sql.js是規定了一些常用關鍵字，好吧其實我們可以在這裏改，做下擴展嘛。我選擇的是下一個sql-hint.js

第二步看下我寫的sql-hint.js吧：

sql-hint.js

/**
 * 2016/03/22 yc 重寫sql-hint.js
 * @param {Object} mod
 */
(function(mod) {
	if (typeof exports == "object" && typeof module == "object") // CommonJS
		mod(require("../../lib/codemirror"), require("../../mode/sql/sql"));
	else if (typeof define == "function" && define.amd) // AMD
		define(["../../lib/codemirror", "../../mode/sql/sql"], mod);
	else // Plain browser env
		mod(CodeMirror);
})(function(CodeMirror) {
	"use strict";
	var Pos = CodeMirror.Pos;
    /**
     * 從sql.js裏獲取keyword數組
     * @param {Object} editor
     */
	function getKeywords(editor) {
		var mode = editor.doc.modeOption;
		if (mode === "sql") mode = "text/x-sql";
		return CodeMirror.resolveMode(mode).keywords;
	};
    /**
     * 判斷元素item是否存在數組arr中  
     * @param {Object} arr
     * @param {Object} item
     */
	function arrayContains(arr, item) { // 判斷元素item是否存在數組arr中  
		if (!Array.prototype.indexOf) {
			var i = arr.length;
			while (i--) {
				if (arr[i] === item) {
					return true;
				}
			}
			return false;
		}
		return arr.indexOf(item) != -1;
	};
    
	function hintSql(editor, keywords, tableKeywords, getToken, options) { // 處理hint的核心函數，改名爲velocityHint(也可以不做修改)  
		// Find the token at the cursor，獲取當前光標指定的字符串  
		var cur = editor.getCursor(),
			token = getToken(editor, cur),
			tprop = token;
		return {
			list: getCompletions(token, keywords, tableKeywords, options),
			from: Pos(cur.line, fetchStartPoint(token)), // 字符串拼接的初始位置，這個很重要  
			to: Pos(cur.line, token.end)
		};
	};
    /**
     * 字符拼接位置
     * @param {Object} token
     */
	function fetchStartPoint(token) {
		var index = token.string.lastIndexOf("\.");
		if (index < 0) {
			return token.start;
		} else {
			return token.start + index + 1;
		}
		//		return token.start;
	};

	function sqlHint(editor, options) {
		var keywords = wordToString(getKeywords(editor)) + CodeMirror.keywords;
		return hintSql(editor, keywords, CodeMirror.tableKeywords, function(e, cur) {
			return e.getTokenAt(cur);
		}, options);
	};
	CodeMirror.registerHelper("hint", "sql", sqlHint);
    /**
     * 得到匹配的關鍵字數組
     * @param {Object} token
     * @param {Object} keywords
     * @param {Object} tableKeywords
     * @param {Object} options
     */
	function getCompletions(token, keywords, tableKeywords, options) {
		var found = [],
			start, pointCount, content = getWord(token.str.string, token.str.end); // found爲匹配的數組  
		if (content && content.length) {
			start = token.string.charAt(0); //字符串首字母
			content = content.trim().substring(0, content.lenght); //除首字母外的截取
			pointCount = (start == '\.') ? true : false; //判斷最後一個字符是否是.
		}
		var result = null;
		if (start && start.trim() != '') { // 必須以$開頭，這裏暫時不解析${}  
			var regexp = new RegExp("\\b" + content + "\\w+\\.?\\b", "gi");
			if (pointCount && tableKeywords) {
				result = tableKeywords.match(regexp);
			} else {
				result = keywords.match(regexp);
			}
			console.log('result = ' + result);
		}
		if (result && result.length) {
			for (var i = 0; i < result.length; i++) {
				if (!arrayContains(found, result[i]) && content.length <= result[i].length && pointCount) {
					if (result[i].charAt(result[i].length-1) == '.') { //如果最後一位是'.'
						found.push(result[i].substring(content.lastIndexOf("\.") + 1, result[i].length - 1));
					} else {
						found.push(result[i].substring(content.lastIndexOf("\.") + 1, result[i].length));
					}
				} else {
					found.push(result[i]);
				}
			}
		}
		return found;
	};
	/**
	 * 獲取當前字符串
	 * @param {Object} str 當前行字符串
	 * @param {Object} end 結束位置
	 */
	function getWord(str, end) {
		return str.substring(str.lastIndexOf(' '), end);
	};
    /**
     * 將wordlist拼成字符串
     * @param {Object} wordlist
     */
	function wordToString(wordlist) {
		var str = '';
		for (var word in wordlist) {
			str += word + ' ';
		}
		return str;
	};
});

 註釋還好啦，你比對下原來的js就會發現實現方法。其實我就是定義了外部變量然後通過賦值拓展的方式實現的。

html頁面：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<link rel="stylesheet" href="js/codemirror-5.2/theme/3024-day.css">
	<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/lib/codemirror.css" />
	<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/addon/hint/show-hint.css" />
	<script type="text/javascript" src="js/codemirror-5.2/lib/codemirror.js"></script>
	<script type="text/javascript" src="js/codemirror-5.2/mode/sql/sql.js"></script>
	<script type="text/javascript" src="js/codemirror-5.2/addon/hint/show-hint.js"></script>
	<script type="text/javascript" src="js/sql-hint.js"></script>

	<style>
		.CodeMirror {
			border: 1px solid black;
		}
	</style>

	<body>
		<h2>SQL編輯器</h2>
		<form>
			<textarea id="code" name="code"></textarea>
		</form>
		<script>
			CodeMirror.keywords = "server software ";
			CodeMirror.tableKeywords = "server.ip server.cache software.conf software.version software.tags.count ";
			var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
				lineNumbers: true,
				extraKeys: {
					"Ctrl": "autocomplete"
				}, //輸入s然後ctrl就可以彈出選擇項  
				mode: {
					name: "text/x-mysql"
				},
				theme: "3024-day" //主題  
			});
			editor.on('change', function() {
				editor.showHint(); //滿足自動觸發自動聯想功能
			});
		</script>
	</body>

</html>

第三步，我們來看下具體的結果：