2017-05-26 15:32:01 +08:00
<!DOCTYPE HTML>
2020-09-23 16:23:38 +08:00
< html lang = "en" >
2017-05-26 15:32:01 +08:00
< head >
2020-09-23 16:23:38 +08:00
< meta charset = "utf-8" >
2017-05-26 15:32:01 +08:00
< title > JSONEditor | Auto Complete< / title >
2019-08-29 21:45:32 +08:00
2017-05-26 15:32:01 +08:00
< link href = "../dist/jsoneditor.css" rel = "stylesheet" type = "text/css" >
< script src = "../dist/jsoneditor.js" > < / script >
< style type = "text/css" >
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
< / style >
< / head >
< body >
< p >
2019-08-29 21:45:32 +08:00
This example demonstrates how to autocomplete works, options available are: 'apple','cranberry','raspberry','pie', 'mango', 'mandarine', 'melon', 'appleton'.
2017-05-26 15:32:01 +08:00
< / p >
< div id = "jsoneditor" > < / div >
< script >
// create the editor
2019-08-29 21:45:32 +08:00
const container = document.getElementById('jsoneditor')
const options = {
2017-07-02 19:44:08 +08:00
autocomplete: {
getOptions: function () {
2019-12-01 18:56:22 +08:00
return ['apple', 'cranberry', 'raspberry', 'pie', 'mango', 'mandarine', 'melon', 'appleton'];
2017-05-26 15:32:01 +08:00
}
2017-07-02 19:44:08 +08:00
}
2019-08-29 21:45:32 +08:00
}
const json = {
2017-07-02 19:44:08 +08:00
'array': [{'field1':'v1', 'field2':'v2'}, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
2019-08-29 21:45:32 +08:00
}
const editor = new JSONEditor(container, options, json)
2017-05-26 15:32:01 +08:00
< / script >
< / body >
< / html >
