autocom pletion.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ACE Autocompletion demo</title>
  6. <style type="text/css" media="screen">
  7. body { overflow: hidden; }
  8. #editor {
  9. margin: 0; position: absolute;
  10. top: 0; bottom: 0; left: 0; right: 0;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <pre id="editor"></pre>
  16. <!-- load ace -->
  17. <script src="../src/ace.js"></script>
  18. <!-- load ace language_tools extension -->
  19. <script src="../src/ext-language_tools.js"></script>
  20. <script>
  21. var langagueTools = require("ace/ext/language_tools");
  22. var editor = ace.edit("editor");
  23. editor.session.setMode("ace/mode/html");
  24. editor.setTheme("ace/theme/tomorrow");
  25. // enable autocompletion and snippets
  26. editor.setOptions({
  27. enableBasicAutocompletion: true,
  28. enableSnippets: true,
  29. enableLiveAutocompletion: false
  30. });
  31. //editor.completers.length = 0
  32. editor.completers.push({
  33. getCompletions: function(editor, session, pos, prefix, callback) {
  34. setTimeout(function() {
  35. callback(null, [{
  36. // string used for filtering
  37. value: "customCompletion",
  38. // optional, allows to display a caption different from value
  39. caption: "!!customCompletion!!",
  40. // optional, snippet that can be inseted instead of value
  41. snippet: "${2}insert${1:This}${2}Instead$0",
  42. // short description
  43. meta: "foo"
  44. }, {
  45. value: "customCompletion2"
  46. }]);
  47. }, 500);
  48. }
  49. });
  50. </script>
  51. <script src="./show_own_source.js"></script>
  52. </body>
  53. </html>