anywordhint.html (2685B)
1 <!doctype html> 2 3 <title>CodeMirror: Any Word Completion Demo</title> 4 <meta charset="utf-8"/> 5 <link rel=stylesheet href="../doc/docs.css"> 6 7 <link rel="stylesheet" href="../lib/codemirror.css"> 8 <link rel="stylesheet" href="../addon/hint/show-hint.css"> 9 <script src="../lib/codemirror.js"></script> 10 <script src="../addon/hint/show-hint.js"></script> 11 <script src="../addon/hint/anyword-hint.js"></script> 12 <script src="../mode/javascript/javascript.js"></script> 13 <div id=nav> 14 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 15 16 <ul> 17 <li><a href="../index.html">Home</a> 18 <li><a href="../doc/manual.html">Manual</a> 19 <li><a href="https://github.com/codemirror/codemirror">Code</a> 20 </ul> 21 <ul> 22 <li><a class=active href="#">Any Word Completion</a> 23 </ul> 24 </div> 25 26 <article> 27 <h2>Any Word Completion Demo</h2> 28 <form><textarea id="code" name="code"> 29 (function() { 30 "use strict"; 31 32 var WORD = /[\w$]+/g, RANGE = 500; 33 34 CodeMirror.registerHelper("hint", "anyword", function(editor, options) { 35 var word = options && options.word || WORD; 36 var range = options && options.range || RANGE; 37 var cur = editor.getCursor(), curLine = editor.getLine(cur.line); 38 var start = cur.ch, end = start; 39 while (end < curLine.length && word.test(curLine.charAt(end))) ++end; 40 while (start && word.test(curLine.charAt(start - 1))) --start; 41 var curWord = start != end && curLine.slice(start, end); 42 43 var list = [], seen = {}; 44 function scan(dir) { 45 var line = cur.line, end = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir; 46 for (; line != end; line += dir) { 47 var text = editor.getLine(line), m; 48 word.lastIndex = 0; 49 while (m = word.exec(text)) { 50 if ((!curWord || m[0].indexOf(curWord) == 0) && !seen.hasOwnProperty(m[0])) { 51 seen[m[0]] = true; 52 list.push(m[0]); 53 } 54 } 55 } 56 } 57 scan(-1); 58 scan(1); 59 return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)}; 60 }); 61 })(); 62 </textarea></form> 63 64 <p>Press <strong>ctrl-space</strong> to activate autocompletion. The 65 completion uses 66 the <a href="../doc/manual.html#addon_anyword-hint">anyword-hint.js</a> 67 module, which simply looks at nearby words in the buffer and completes 68 to those.</p> 69 70 <script> 71 CodeMirror.commands.autocomplete = function(cm) { 72 cm.showHint({hint: CodeMirror.hint.anyword}); 73 } 74 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 75 lineNumbers: true, 76 extraKeys: {"Ctrl-Space": "autocomplete"} 77 }); 78 </script> 79 </article>