How to implement AutoComplete textfield feature in JSONEditor using Josdejong library in react js

Question

I have to implement a feature like user will get the list of names and when user will type in the textfield, list should should appear with suggestions and user will pick the value. I saw autoComplete feature is there but I am not aware how to use that.

Ref:https://github.com/josdejong/jsoneditor

Kindly, help in this. Thank you

Answer 1

Download the library from the GitHub repository and include the necessary CSS and JavaScript files.

<link rel="stylesheet" type="text/css" href="jsoneditor.min.css">
<script src="jsoneditor.min.js"></script>

Create a JSON Editor instance with the desired options, including the autocomplete option set to true.

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

<script>
  var container = document.getElementById("jsoneditor")
  var options = {
    mode: "tree",
    autocomplete: true // Enable autocomplete
  }
  var editor = new JSONEditor(container, options)
</script>

Populate the JSON Editor with data. You can do this by calling the set method on the editor instance and passing in your JSON data.

<script>
  var data = {
    // Your JSON data here
  }
  editor.set(data)
</script>