s:CMS

Example of Search component using Directus API, with predefined values and only advanced search UI

This example shows how to use the Search component to search data from a Directus API. The Search component takes a source prop that specifies the source of the data to search. In this example, the source is a Directus API that provides data from a table named scms_ksa. The fieldList prop specifies the fields to search in the data, the resultItemTemplate prop specifies the template to use to display the search results, and the limitTo prop is set to advanced, on order to limit the view of the only advanced form. The fieldList prop also includes a dropdown list of predefined values for the Item_Label field.

<Search
  source={{
    directus: {
      table: "scms_ksa"
    }
  }}
  fieldList={{
    "Item_Label": {label: "Label", values: ["KM 50", "KM 55"]},
    "Site_Name": "Site name",
    "Site_Description": "Site description"
    }}
    limitTo="advanced"
    resultItemTemplate = { item => {
      return  <div key={item.id} className="border-bottom py-3">
        <strong>{item.Item_Label} — {item.Site_Name}</strong>
        <p>{item.Site_Description}</p>
    </div>
    }}
/>