Example of Search component using Directus API
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, and the resultItemTemplate prop specifies the template to use to display the search results.
<Search
source={{
directus: {
table: "scms_ksa"
}
}}
fieldList={{
"Item_Label": "Label",
"Site_Name": "Site name",
"Site_Description": "Site description"
}}
resultItemTemplate = { item => {
return <div className="card my-3" key={item.id}>
<div className="card-body">
<h5 className="card-title">{item.Item_Label} — {item.Site_Name}</h5>
<div className="card-text">
<div className="row">
<div className="col-3">
<img src={item.Thumbnail} className="card-img-top img-fluid" alt={item.Site_Name} style={{maxWidth: 200}} />
</div>
<div className="col-9">
{item.Site_Description}
<hr />
<a href={`../record/?tb=scms_ksa&id=${item.id}`} className="btn btn-primary">View</a>
</div>
</div>
</div>
</div>
</div>
}}
/>Data from Kahramanmaraş Survey created by Elizabeth Carter and published on OpenContext add distributed with CC BY 4.0 International license.