Autocomplete Renderer Example

The following examples display the autocomplete renderer. The autocomplete renderer is used by specifying an enum or an oneOf in the JSON schema and setting the autocomplete option in the UI schema.

Enum

Demo

Autocomplete Enum

Schema

schema.json

{
  "type": "object",
  "properties": {
    "autocompleteEnum": {
      "type": "string",
      "enum": [
        "foo",
        "bar",
        "foobar"
      ]
    }
  }
}

UI Schema

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/autocompleteEnum",
      "options": {
        "autocomplete": true
      }
    }
  ]
}

Data

{}

One Of

Demo

Autocomplete One Of

Schema

schema.json

{
  "type": "object",
  "properties": {
    "autocompleteOneOf": {
      "type": "string",
      "oneOf": [
        {
          "const": "foo",
          "title": "Foo"
        },
        {
          "const": "bar",
          "title": "Bar"
        },
        {
          "const": "foobar",
          "title": "FooBar"
        }
      ]
    }
  }
}

UI Schema

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/autocompleteOneOf",
      "options": {
        "autocomplete": true
      }
    }
  ]
}

Data

{}