Components

Autocomplete

Good forSearchAutocompleteLookup Multiple

Usage

const chosenEmployee = await io.input.autocomplete('Search for an employee', async (input: string) => {
  const result = await db.query.employeesTable.findMany({
    where: ilike('employeeName', `${input}%`)
  })
  return result.map(e => ({ label: e.name, value: e }))
})

console.log(chosenEmployee) // { employeeId: '141', name: 'John Wick' }

Parameters

labelrequired
string

The label to render above the input.

queryrequired
Promise<Array<{ label: string, value: JsonValue }>>

An asynchronous function that takes a string input and outputs an Array of objects. Each object has a key label with value of string representing what is shown to the user as options. The value key represents the value returned by the option. This value must be a valid JSON serializable value like a string or an Array of strings.

options { ... }
disabled
boolean

Disables user input. Default false.

multiple
boolean

Allow the user to select multiple options. Default false.

selectionAppearance
'text-input' | 'option'

Rendering mode for selected option(s). Default 'text-input'.

help
string

The small help text to render below the input. Default undefined.

placeholder
string

The placeholder to render within the input. Default undefined.

customValidator
(input: unknown) => Promise<string | true>

An asynchronous function that takes unknown input and outputs either true or an error message string to show the user.