Autocomplete-Json-Forms.js

import Autocomplete from 'react-autocomplete';
import { rankWith, scopeEndsWith } from '@jsonforms/core';
import { JsonForms, withJsonFormsControlProps } from '@jsonforms/react';
import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
import React from "react"

const schema = {
  "type": "object",
  "title": "The Root Schema",
  "description": "The root schema comprises the entire JSON document.",
  "required": [
    "occupation"
  ],
  "properties": {
    "name": {
      "$id": "#/properties/occupation",
      "type": "string",
      "title": "The Occupation Schema",
      "description": "An explanation about the purpose of this instance.",
      "default": "",
      "examples": [
        "Accountant"
      ]
    }
  }
}

const uischema = {
  "type": "HorizontalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/name",
      "suggestion": [
        "Accountant",
        "Engineer",
        "Freelancer",
        "Journalism",
        "Physician",
        "Student",
        "Teacher",
        "Other"
      ]
    }]
}


class AutoCompleteCustomRendererUnwrapper extends React.Component {
  render() {
    return (<Autocomplete
      getItemValue={(item) => item}
      items={this.props.uischema.suggestion}
      renderItem={(item, isHighlighted) =>
        <div key={item} style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
          {item}
        </div>
      }
      value={this.props.data}
      onChange={e => this.props.handleChange(this.props.path, e.target.value)}
      onSelect={(value) => this.props.handleChange(this.props.path, value)}
      shouldItemRender={(item, value) => item.toLowerCase().indexOf(value.toLowerCase()) > -1}
    />)

  }

}

const AutoCompleteCustomRenderer = withJsonFormsControlProps(AutoCompleteCustomRendererUnwrapper)


class App extends React.Component {
  render() {
    return <JsonForms
      schema={schema}
      uischema={uischema}
      data={{}}
      renderers={
        [
          ...materialRenderers,
          //register custom renderer
          { tester: rankWith(3, scopeEndsWith('name')), renderer: AutoCompleteCustomRenderer }
        ]}
      cells={materialCells}
    />
  }
}



export default App