Skip to content

Commit 828cbff

Browse files
committed
added autocomplete example
1 parent e2ed287 commit 828cbff

File tree

1 file changed

+65
-0
lines changed

1 file changed

+65
-0
lines changed

README_ADDON.md

+65
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,71 @@ For configuration options, see the [Autocomplete homepage](https://autocomplete.
141141
**Source:** src/editors/autocomplete.js
142142
<br>
143143

144+
#### Example
145+
146+
Javascript
147+
148+
```
149+
window.JSONEditor.defaults.callbacks = {
150+
"autocomplete": {
151+
// This is callback functions for the "autocomplete" editor
152+
// In the schema you refer to the callback function by key
153+
// Note: 1st parameter in callback is ALWAYS a reference to the current editor.
154+
// So you need to add a variable to the callback to hold this (like the
155+
// "jseditor_editor" variable in the examples below.)
156+
157+
// Setup API calls
158+
"search_za": function search(jseditor_editor, input) {
159+
var url = '/eiao/api/json-object?filter[or][][data_json][LIKE]=' + encodeURI(input) +'&filter[or][][uuid][LIKE]=' + encodeURI(input);;
160+
161+
return new Promise(function (resolve) {
162+
if (input.length < 2) {
163+
return resolve([]);
164+
}
165+
166+
fetch(url).then(function (response) {
167+
return response.json();
168+
}).then(function (data) {
169+
resolve(data);
170+
});
171+
});
172+
},
173+
"renderResult_za": function(jseditor_editor, result, props) {
174+
return ['<li ' + props + '>',
175+
'<div class="eiao-object-title">' + result.data_json + '</div>',
176+
'<div class="eiao-object-snippet">' + result.uuid.substring(0,7) + ' <small>' + result.schema_uuid.substring(0,5) + '<small></div>',
177+
'</li>'].join('');
178+
},
179+
"getResultValue_za": function getResultValue(jseditor_editor, result) {
180+
return result.uuid;
181+
}
182+
}
183+
};
184+
```
185+
186+
JSON-schema
187+
188+
```json
189+
{
190+
"items": {
191+
"title": "UUID",
192+
"type": "string",
193+
"description": "reference (autocomplete)",
194+
"format": "autocomplete",
195+
"options": {
196+
"autocomplete": {
197+
"search": "search_za",
198+
"getResultValue": "getResultValue_za",
199+
"renderResult": "renderResult_za",
200+
"autoSelect": true
201+
}
202+
}
203+
},
204+
"title": "Project references",
205+
"type": "array"
206+
}
207+
```
208+
144209
### Checkbox
145210
**Description**
146211
Checkbox format.

0 commit comments

Comments
 (0)