Autocomplete

---

The "Autocomplete" is an input field that displays a drop-down list of pre-determined options. Users, as they type into it, see a dynamically filtered list from which they can select one.

Autocomplete Properties

Property	Description
Search Value	Enter the "Key" of the "Key-Value" pair. The "Value" will be the display name on the drop-down list. (Note: This field is case-sensitive.)
Error Message	Text typed here will be printed as the 'error message!'

Creating the Drop-Down List

There are two ways to populate the widget with data; one is by manually entering (hard-coding) the data within its onChange field, and the other is by using API to source the data.

An example of the autocomplete feature with your hard-coded data

Hardcoded-Method

// @param value {string}: IFSC Code of the bank (input from the user).
// @param asset {any[]}: list of assets in the form.
// @return {obj{ ok: boolean, data: result[] }}: returns an object with OK status and result array.
async function main(value, asset) {
  const data = [
    {
      title: "a1",
      name: "John"
    },
    {
      title: "a2",
      name: "Peter"
    },
    {
      title: "a3",
      name: "Marcus"
    },
  ]
// filtering logic: when you have entered "name" (or "title") as your "Search Value".
   data = data.filter(item => item.name.toLowerCase().includes(value))
  return {
    ok: true,
    data: data
  }
}

An example of the autocomplete feature with the RazerPay IFSC Toolkit (API)

API-Method

// @param value {string}: IFSC Code of the bank (input from user).
// @param asset {any[]}: list of assets in the form.
// @return {obj{ ok: boolean, data: result[] }}: returns an object with OK status and result array.
async function main(value, asset) {
  const url = "https://ifsc.razorpay.com/" + value;
  const result = await axios.get(url)
  return {
    ok: true,
    data: [result.data]
  }
}

API Methods

setReadOnly

Sets the ReadOnly flag for this component.

Method

setReadOnly(readOnly: boolean): void

Usage

// Setting the readOnly to "true" renders the field as non-editable
a8forms.Autocomplete("autocompleteId").setReadOnly(true)

// Setting the readOnly to "false" enables the field to be editable
a8forms.Autocomplete("autocompleteId").setReadOnly(false)

setVisibility

Sets the Visibility flag for this component.

Method

setVisibility(visible: boolean): void

Usage

// Setting the visibility to "true" makes the element visible
a8forms.Autocomplete("autocompleteId").setVisibility(true)

// Setting the visibility to "false" makes the element invisible
a8forms.Autocomplete("autocompleteId").setVisibility(false)

setVisibilityCondition

Sets the visibility condition for this component.

Method

setVisibilityCondition(condition: string): void

Usage

// Sets a condition for changing the element's visibility status.
a8forms.Autocomplete("autocompleteId").setVisibilityCondition("1 === 1")

Event Handlers

Event handlers allow you to set triggers for various actions based on the fired events. They are as follows:

onChange

onChange - Triggers a specified action every time there's a change to the component's "value".

onSelect

onSelect - Sets the action that's performed when an "option" is selected.