Typing Search
Search people
Nina Simone
Miles Davis
Herbie Hancock
Joni Mitchell
Nina Simone
Miles Davis
Herbie Hancock
Joni Mitchell
A query gets typed out letter by letter while the list filters live, highlighting the matched text and collapsing rows that no longer fit, then clears and tries another search. Rows take a photo when one is given and fall back to initials.
The import and the props worth knowing about, in one place.
import { Search25 } from "@/components/beste/piece/search25";
<Search25
placeholder="Search people"
queries={[
"miles",
"herbie",
"joni"
]}
results={[
{
"title": "Nina Simone",
"avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face"
},
{
"title": "Miles Davis",
"avatar": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face"
},
{
"title": "Herbie Hancock",
"avatar": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face"
},
{
"title": "Joni Mitchell"
}
]}
bordered={false}
/>