5 <title>CodeMirror: XML Autocomplete Demo</title>
6 <link rel="stylesheet" href="../lib/codemirror.css">
7 <script src="../lib/codemirror.js"></script>
8 <script src="../addon/hint/show-hint.js"></script>
9 <link rel="stylesheet" href="../addon/hint/show-hint.css">
10 <script src="../addon/hint/xml-hint.js"></script>
11 <script src="../mode/xml/xml.js"></script>
12 <link rel="stylesheet" href="../doc/docs.css">
13 <style type="text/css">
14 .CodeMirror { border: 1px solid #eee; }
18 <h1>CodeMirror: XML Autocomplete demo</h1>
20 <form><textarea id="code" name="code"><!-- write some xml below -->
23 <p>Press <strong>ctrl-space</strong>, or type a '<' character to
24 activate autocompletion. This demo defines a simple schema that
25 guides completion. The schema can be customized—see
26 the <a href="../doc/manual.html#addon_xml-hint">manual</a>.</p>
28 <p>Development of the <code>xml-hint</code> addon was kindly
30 by <a href="http://www.xperiment.mobi">www.xperiment.mobi</a>.</p>
35 color: ["red", "green", "blue", "purple", "white", "black", "yellow"],
36 size: ["large", "medium", "small"],
46 lang: ["en", "de", "fr", "nl"],
49 children: ["animal", "plant"]
56 children: ["wings", "feet", "body", "head", "tail"]
60 children: ["leaves", "stem", "flowers"]
62 wings: dummy, feet: dummy, body: dummy, head: dummy, tail: dummy,
63 leaves: dummy, stem: dummy, flowers: dummy
66 function completeAfter(cm, pred) {
67 var cur = cm.getCursor();
68 if (!pred || pred()) setTimeout(function() {
69 if (!cm.state.completionActive)
70 CodeMirror.showHint(cm, CodeMirror.hint.xml, {schemaInfo: tags, completeSingle: false});
72 return CodeMirror.Pass;
75 function completeIfAfterLt(cm) {
76 return completeAfter(cm, function() {
77 var cur = cm.getCursor();
78 return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
82 function completeIfInTag(cm) {
83 return completeAfter(cm, function() {
84 var tok = cm.getTokenAt(cm.getCursor());
85 if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;
86 var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
91 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
96 "'/'": completeIfAfterLt,
97 "' '": completeIfInTag,
98 "'='": completeIfInTag,
99 "Ctrl-Space": function(cm) {
100 CodeMirror.showHint(cm, CodeMirror.hint.xml, {schemaInfo: tags});