jsoneditor/examples/13_autocomplete_advanced.html

104 lines
3.5 KiB
HTML
Raw Normal View History

2017-05-16 14:20:30 +08:00
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Auto Complete</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
2017-05-26 15:32:01 +08:00
2017-05-16 14:20:30 +08:00
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
</style>
2017-05-17 13:15:13 +08:00
<!--<link href="./css/darktheme.css" rel="stylesheet" type="text/css">-->
2017-05-16 14:20:30 +08:00
</head>
<body>
<p>
2017-05-26 15:45:20 +08:00
This example demonstrates how to autocomplete works with an ActivationChar option, press "*" in any value and continue with autocompletion.
The autocomplete returns the posible jsonpaths of the existing json document.
2017-05-16 14:20:30 +08:00
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
2017-05-26 15:32:01 +08:00
var container = document.getElementById('jsoneditor');
2017-05-16 14:20:30 +08:00
var options = {
modes: ['text', 'tree'],
autocomplete: {
confirmKeys: [39, 35, 9, 190], // Confirm Autocomplete Keys: [right, end, tab, '.'] // By default are only [right, end, tab]
activationChar: '*', // ActivationChar indicate if the value starts with this Char then autocompletion will be activated. ('' will be ignored).
applyTo:['value'],
getOptions: function (autocomplete, node, text) {
2017-05-16 14:20:30 +08:00
var data = {};
2017-05-26 15:32:01 +08:00
autocomplete.startFrom = 0;
2017-05-16 14:20:30 +08:00
var lastPoint = text.lastIndexOf('.');
if ((lastPoint > 0) && (text.length > 1)) {
var fnode = node.editor.node.findNode('.' + text.substring(this.activationChar.length, lastPoint));
2017-05-16 14:20:30 +08:00
if (fnode && typeof fnode.getValue() == 'object') {
data = fnode.getValue();
2017-05-26 15:32:01 +08:00
// Indicate that autocompletion should start after the . (ignoring the first part)
autocomplete.startFrom = text.lastIndexOf('.') + 1;
2017-05-16 14:20:30 +08:00
}
}
else
data = node.editor.get();
var optionsStr = YaskON.stringify(data, null, this.activationChar);
2017-05-16 14:20:30 +08:00
var options = optionsStr.split("\n");
2017-05-26 15:32:01 +08:00
return options;
2017-05-16 14:20:30 +08:00
}
}
};
var YaskON = {
// Return first level json paths by the node 'o'
stringify: function (o, prefix, activationChar) {
prefix = prefix || '';
switch (typeof o) {
case 'object':
var output = "";
if (Array.isArray(o)) {
o.forEach(function (e, index) {
output += activationChar + prefix + '[' + index + ']' + '\n';
}.bind(this));
return output;
}
output = "";
for (var k in o) {
if (o.hasOwnProperty(k)) {
if (prefix == "") output += this.stringify(o[k], k, activationChar);
}
}
if (prefix != "") output += activationChar + prefix + '\n'
return output;
case 'function':
return "";
default:
return prefix + '\n';
}
}
};
var json = {
'array': [{ 'field1': 'v1', 'field2': 'v2' }, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': { 'a': 'b', 'c': 'd' },
'string': 'Hello World'
};
2017-05-16 14:20:30 +08:00
var editor = new JSONEditor(container, options, json);
</script>
</body>
</html>