Autocomplete

Example Usage

import zero_true as zt

# Create an Autocomplete component
autocomplete = zt.Autocomplete(
  id="sample_autocomplete",
  clearable=True,                      # Determines if the autocomplete box has a clearable option
  color="primary",                     # Color of the autocomplete component
  disabled=False,                      # Determines if the autocomplete box is disabled
  items=["Option 1", "Option 2", "Option 3"],  # Options for the autocomplete box
  label="Search options",              # Label for the autocomplete box
  multiple=False,                      # Determines if multiple selections are allowed
  readonly=False,                      # Determines if the autocomplete box is read-only
  triggerEvent="update:modelValue",    # Trigger event for when to run based on the selected value
  value=None                           # Selected option for the autocomplete box
)

# Assuming you have a mechanism to render or use this Autocomplete within a layout
layout = zt.Layout(components=[autocomplete])

Example Output

Overview

pydantic model zero_true.Autocomplete

The Autocomplete component enhances user experience by enabling searchable select functionality, which is particularly useful when dealing with a large number of options. This component allows users to type and search through available choices, thereby speeding up the selection process.

The ability to clear selections, define multiple selections, and customize the color are additional features that make it versatile and adaptable to various user interface requirements. It can also be set to readonly or disabled states, providing further control over the input process.

JSON Schema

Field Defenitions

{
   "title": "Autocomplete",
   "description": "Autocomplete is a select box that allows users to search the available options. \nOptimal for when there are many options to choose from",
   "type": "object",
   "properties": {
      "id": {
         "description": "Unique id for a component",
         "title": "Id",
         "type": "string"
      },
      "variable_name": {
         "default": "",
         "description": "Optional variable name associated with a component",
         "title": "Variable Name",
         "type": "string"
      },
      "component": {
         "default": "v-autocomplete",
         "description": "Vue component name",
         "title": "Component",
         "type": "string"
      },
      "items": {
         "description": "Options for the autocomplete box. Can be a list of strings or integers",
         "items": {
            "anyOf": [
               {
                  "type": "string"
               },
               {
                  "type": "integer"
               }
            ]
         },
         "title": "Items",
         "type": "array"
      },
      "value": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "integer"
            },
            {
               "type": "null"
            }
         ],
         "default": "",
         "description": "Selected option for the autocomplete box",
         "title": "Value"
      },
      "label": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Label for the autocomplete box",
         "title": "Label"
      },
      "multiple": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if multiple selections are allowed",
         "title": "Multiple"
      },
      "clearable": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the autocomplete box has a clearable option",
         "title": "Clearable"
      },
      "disabled": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the autocomplete box is disabled",
         "title": "Disabled"
      },
      "readonly": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the autocomplete box is read-only",
         "title": "Readonly"
      },
      "color": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Color of the autocomplete component. Can be custom or standard Material color",
         "pre": true,
         "title": "Color"
      },
      "triggerEvent": {
         "default": "update:modelValue",
         "description": "Trigger event for when to run based on the selected value",
         "title": "Triggerevent",
         "type": "string"
      }
   },
   "required": [
      "id",
      "items"
   ]
}

Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.

zero_true.Autocomplete

Zero True Component

Show properties

field clearable

field clearable: bool | None = None; Determines if the autocomplete box has a clearable option.

field color

field color: str | None = None; Color of the autocomplete component. Can be custom or standard Material color.

field component

field component: str = ‘v-autocomplete’; Vue component name.

field disabled

field disabled: bool | None = None; Determines if the autocomplete box is disabled.

field items

field items: List[str | int] [Required]; Options for the autocomplete box. Can be a list of strings or integers.

field label

field label: str | None = None; Label for the autocomplete box.

field multiple

field multiple: bool | None = None; Determines if multiple selections are allowed.

field readonly

field readonly: bool | None = None; Determines if the autocomplete box is read-only.

field triggerEvent

field triggerEvent: str = ‘update:modelValue’; Trigger event for when to run based on the selected value.

field value

field value: str | int | None = ”; Selected option for the autocomplete box.

Methods

classmethod get_value_from_global_state: (value, values);