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.