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

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

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

{}