- Change signature of getOptions function to (text, path, input)

- Remove node object from exposure.
- Improve startFrom option by returning the start position.
This commit is contained in:
Israel Garcia 2017-06-29 01:57:54 -04:00
parent f71aa6c5b9
commit 088d7d6c90
6 changed files with 61 additions and 46 deletions

View File

@ -157,10 +157,6 @@ Constructs a new JSONEditor.
Indicate the KeyCodes for trigger confirm completion, by default those keys are: [39, 35, 9] which are the code for [right, end, tab]
- `{Object} applyTo`
Indicate where the autocomplete is going to be activated, under field in json node or/and under value in a json node, default is: ['field','value']
- `{Function} getOptions (autocomplete, node, text, elementType)`
This function will return your possible options for create the autocomplete selection, you can control dynamically which options you want to display according to the current active editing node.
@ -168,10 +164,9 @@ Constructs a new JSONEditor.
*Parameters:*
- autocomplete : The instance of the autocomplete engine.
- node : The current active editing node. (node include field and value)
- text : The text in the current node part. (basically the text that the user is editing)
- elementType : Can be "field" or "value" depending if the user is editing a field name or a value of a node.
- text : The text in the current node part. (basically the text that the user is editing)
- path : The document json object that is being edited.
- input : Can be "field" or "value" depending if the user is editing a field name or a value of a node.
### Methods

View File

@ -38,17 +38,14 @@
modes: ['text', 'tree'],
autocomplete: {
applyTo:['value'],
getOptions: function (autocomplete, node, text) {
getOptions: function (text, path) {
return new Promise(function (resolve, reject) {
var data = node.editor.get();
var options = extractUniqueWords(data);
var options = extractUniqueWords(path);
if (options.length > 0) resolve(options); else reject();
});
}
}
};
};
// ...

View File

@ -5,6 +5,7 @@
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<script src="jsonpath.min.js"></script>
<style type="text/css">
@ -38,26 +39,24 @@
modes: ['text', 'tree'],
autocomplete: {
confirmKeys: [39, 35, 9, 190], // Confirm Autocomplete Keys: [right, end, tab, '.'] // By default are only [right, end, tab]
applyTo:['value'],
getOptions: function (autocomplete, node, text) {
if (!text.startsWith(activationChar)) return [];
getOptions: function (text, path, input) {
if (!text.startsWith(activationChar) || input != 'value') return [];
var data = {};
autocomplete.startFrom = 0;
var startFrom = 0;
var lastPoint = text.lastIndexOf('.');
if ((lastPoint > 0) && (text.length > 1)) {
var fnode = node.editor.node.findNode('.' + text.substring(activationChar.length, lastPoint));
if (fnode && typeof fnode.getValue() == 'object') {
data = fnode.getValue();
data = jsonpath.query(path, '$.' + text.substring(activationChar.length, lastPoint));
if (data.length > 0) data = data[0]; else data = {};
// Indicate that autocompletion should start after the . (ignoring the first part)
autocomplete.startFrom = text.lastIndexOf('.') + 1;
}
startFrom = text.lastIndexOf('.') + 1;
}
else
data = node.editor.get();
data = path;
var optionsStr = YaskON.stringify(data, null, activationChar);
var options = optionsStr.split("\n");
return options;
return { startFrom: startFrom, options: options };
}
}
};

20
examples/jsonpath.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -157,7 +157,8 @@ function completely(config) {
elementHint: null,
elementStyle: null,
wrapper: wrapper, // Only to allow easy access to the HTML elements to the final user (possibly for minor customizations)
show: function (element, options) {
show: function (element, startPos, options) {
this.startFrom = startPos;
this.wrapper.remove();
if (this.elementHint) {
this.elementHint.remove();

View File

@ -1111,28 +1111,31 @@ treemode._onKeyDown = function (event) {
if (event.target.className.indexOf("jsoneditor-value") >= 0) jsonElementType = "value";
if (event.target.className.indexOf("jsoneditor-field") >= 0) jsonElementType = "field";
if ((this.options.autocomplete.applyTo.indexOf('value') >= 0 && jsonElementType == "value") ||
(this.options.autocomplete.applyTo.indexOf('field') >= 0 && jsonElementType == "field")) {
var node = Node.getNodeFromTarget(event.target);
// Activate autocomplete
setTimeout(function (hnode, element) {
if (element.innerText.length > 0) {
var result = this.options.autocomplete.getOptions(this.autocomplete, hnode, element.innerText, jsonElementType);
if (typeof result.then === 'function') {
// probably a promise
if (result.then(function (options) {
this.autocomplete.show(element, options);
}.bind(this)));
} else {
// definitely not a promise
this.autocomplete.show(element, result);
}
var node = Node.getNodeFromTarget(event.target);
// Activate autocomplete
setTimeout(function (hnode, element) {
if (element.innerText.length > 0) {
var result = this.options.autocomplete.getOptions(element.innerText, editor.get(), jsonElementType);
if (typeof result.then === 'function') {
// probably a promise
if (result.then(function (obj) {
if (obj.options)
this.autocomplete.show(element, obj.startFrom, obj.options);
else
this.autocomplete.show(element, 0, obj);
}.bind(this)));
} else {
// definitely not a promise
if (result.options)
this.autocomplete.show(element, result.startFrom, result.options);
else
this.autocomplete.show(element, 0, result);
}
else
this.autocomplete.hideDropDown();
}
else
this.autocomplete.hideDropDown();
}.bind(this, node, event.target), 50);
}
}.bind(this, node, event.target), 50);
}
}