jsoneditor/examples/13_autocomplete_advanced.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>JSONEditor | Advanced Auto Complete</title>

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>
  <script src="https://unpkg.com/jsonpath@0.2.11/jsonpath.min.js"></script>

  <style type="text/css">
    #jsoneditor {
      width: 500px;
      height: 500px;
    }

    p {
      width: 500px;
      font-family: "DejaVu Sans", sans-serif;
    }
  </style>

</head>
<body>
<p>
  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, for example <code>*object.a</code>.
</p>

<div id="jsoneditor"></div>

<script>
  // create the editor
  const container = document.getElementById('jsoneditor')
  const activationChar = '*'
  const options = {
    autocomplete: {
      confirmKeys: [39, 35, 9, 190], // Confirm Autocomplete Keys: [right, end, tab, '.']  // By default are only [right, end, tab]
      caseSensitive: false,

      getOptions: function (text, path, input, editor) {
        if (!text.startsWith(activationChar) || input !== 'value') return []
        let data = {}
        let startFrom = 0
        const lastPoint = text.lastIndexOf('.')
        const jsonObj = editor.get()
        if ((lastPoint > 0) && (text.length > 1)) {
          data = jsonpath.query(jsonObj, '$.' + 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)
          startFrom = text.lastIndexOf('.') + 1
        } else {
          data = jsonObj
        }

        const optionsStr = YaskON.stringify(data, null, activationChar)
        const options = optionsStr.split('\n')
        return { startFrom: startFrom, options: options }
      }
    }
  }

  // helper function to auto complete paths of a JSON object
  const YaskON = {
    // Return first level json paths by the node 'o'
    stringify: function (o, prefix, activationChar) {
      prefix = prefix || ''
      switch (typeof o) {
        case 'object':
          let output = ''
          if (Array.isArray(o)) {
            o.forEach(function (e, index) {
              output += activationChar + prefix + '[' + index + ']' + '\n'
            }.bind(this))
            return output
          }
          output = ''
          for (let 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'
      }
    }
  }

  const json = {
    'array': [{ 'field1': 'v1', 'field2': 'v2' }, 2, 3],
    'boolean': true,
    'null': null,
    'number': 123,
    'object': { 'a': 'b', 'c': 'd' },
    'string': 'Hello World'
  }
  const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
-												return jsonpath in getOptions and editor instance.

											
										
										
											2017-07-07 10:26:25 +08:00
+								<!DOCTYPE HTML>
-												Defined charset="utf-8" and lang="en" in all examples

											
										
										
											2020-09-23 16:23:38 +08:00
+								<html lang="en">
-												Autocomplete final refactory

											
										
										
											2017-05-16 14:20:30 +08:00
+								<head>
-												Defined charset="utf-8" and lang="en" in all examples

											
										
										
											2020-09-23 16:23:38 +08:00
+								  <meta charset="utf-8">
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								  <title>JSONEditor | Advanced Auto Complete</title>
-												Autocomplete final refactory

											
										
										
											2017-05-16 14:20:30 +08:00
+								  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
 								  <script src="../dist/jsoneditor.js"></script>
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								  <script src="https://unpkg.com/jsonpath@0.2.11/jsonpath.min.js"></script>
-												Autocomplete final refactory

											
										
										
											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>
 								</head>
 								<body>
 								<p>
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +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, for example <code>*object.a</code>.
-												Autocomplete final refactory

											
										
										
											2017-05-16 14:20:30 +08:00
+								</p>
 								<div id="jsoneditor"></div>
 								<script>
 								  // create the editor
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								  const container = document.getElementById('jsoneditor')
 								  const activationChar = '*'
 								  const options = {
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								    autocomplete: {
 								      confirmKeys: [39, 35, 9, 190], // Confirm Autocomplete Keys: [right, end, tab, '.']  // By default are only [right, end, tab]
-												caseSensitive option added to autocomplete

											
										
										
											2017-12-03 02:30:44 +08:00
+								      caseSensitive: false,
-												Autocomplete final refactory

											
										
										
											2017-05-16 14:20:30 +08:00
-												- move 'editor' parameter to the last position
- send standard array path instead of jsonpath in getOptions

											
										
										
											2017-07-08 01:43:15 +08:00
+								      getOptions: function (text, path, input, editor) {
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								        if (!text.startsWith(activationChar) || input !== 'value') return []
 								        let data = {}
 								        let startFrom = 0
 								        const lastPoint = text.lastIndexOf('.')
 								        const jsonObj = editor.get()
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								        if ((lastPoint > 0) && (text.length > 1)) {
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								          data = jsonpath.query(jsonObj, '$.' + 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)
 								          startFrom = text.lastIndexOf('.') + 1
 								        } else {
 								          data = jsonObj
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								        }
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								        const optionsStr = YaskON.stringify(data, null, activationChar)
 								        const options = optionsStr.split('\n')
 								        return { startFrom: startFrom, options: options }
-												Autocomplete final refactory

											
										
										
											2017-05-16 14:20:30 +08:00
+								      }
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								    }
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								  }
-												Remove activationChar, update documentation.

											
										
										
											2017-06-20 00:03:15 +08:00
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								  // helper function to auto complete paths of a JSON object
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								  const YaskON = {
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								    // Return first level json paths by the node 'o'
 								    stringify: function (o, prefix, activationChar) {
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								      prefix = prefix || ''
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								      switch (typeof o) {
 								        case 'object':
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								          let output = ''
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								          if (Array.isArray(o)) {
 								            o.forEach(function (e, index) {
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								              output += activationChar + prefix + '[' + index + ']' + '\n'
 								            }.bind(this))
 								            return output
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								          }
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								          output = ''
 								          for (let k in o) {
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								            if (o.hasOwnProperty(k)) {
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								              if (prefix === '') output += this.stringify(o[k], k, activationChar)
-												- polyfills moved to utils.js
- lowercase "Show" function
- refine autocomplete examples.
- style improvements to match context menu.
- set auto to scrollbar in autocomplete dropdownbox
- Added docs for Templates and Autocomplete
- Promisify getOptions function
- Add elementType to getOptions function to return which element "field" or "value" is being edited.
- applyTo option now accept ['field', 'value'] instead of ['name', 'value']
- optimize confirmKeys to be part of the autocomplete option instead of autocomplete.config

											
										
										
											2017-06-17 08:19:56 +08:00
+								            }
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								          }
 								          if (prefix !== '') output += activationChar + prefix + '\n'
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								          return output
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								        case 'function':
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								          return ''
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								        default:
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								          return prefix + '\n'
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											2017-07-02 19:44:08 +08:00
+								      }
 								    }
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								  }
-												Remove activationChar, update documentation.

											
										
										
											2017-06-20 00:03:15 +08:00
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								  const json = {
-												Some updates in the examples (indentation, link to jsonpath library instead of including it)

											
										
										
											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'
-												Rewrite code styling of browser examples

											
										
										
											2019-08-29 21:45:32 +08:00
+								  }
 								  const editor = new JSONEditor(container, options, json)
-												Autocomplete final refactory

											
										
										
											2017-05-16 14:20:30 +08:00
+								</script>
 								</body>
 								</html>