Searchable Field (Form)

The searchable field (type: "searchable") displays a drop-down list in the modal form() dialog that lets you select one of the available options. You can type in the select field to quickly filter the matching options.

The syntax is compatible with the select form field. At this moment, the searchable field doesn't support a hierarchy of options but this feature is coming soon.

Searchable Field Properties

• type ("searchable") - specifies the form field type
• name (string) - the field name that will be displayed above the text box
• id (string) - the path that specifies the source/target property of the data object
• options (array) - list of options
• disabled (boolean) - makes the dropdown list field disabled (inaccessible and read-only); optional
• cssClass (string) - additional CSS class that will be applied to the form field; optional
• onValidate (function) - a callback function used to validate the field value; optional

The options array items have the following structure:

• name (string) - item name that will be displayed in the dropdown list
• id (string | number) - value associated with the item

Example

import {Modal} from "@daypilot/modal";

// ...

async function searchable() {
  const resources = [
    { name: "Resource A", id: "A" },
    { name: "Resource B", id: "B" },
    { name: "Resource C", id: "C" },
  ];

  const form = [
    {
      name: "Resource",
      id: "resource",
      options: resources,
      type: "searchable",
    },
  ];

  const data = {
    resource: "B",
  };

  const modal = await Modal.form(form, data);
  console.log(modal.result);
}