// state
const [searchTerm, setSearchTerm] = useState('');
const [allAccounts, setAllAccounts] = useState([])
const [searchedAccounts, setSearchedAccounts] = useState([])
// query
const GET_ACCOUNTS = gql`
query accounts {
accounts {
id
name
status
companyName
}
}
`;
// get query
const { loading, error } = useQuery(GET_ACCOUNTS, {
fetchPolicy: "no-cache",
skip: userType !== 'OS_ADMIN',
onCompleted: (data) => {
setAllAccounts(data.accounts || [])
setSearchedAccounts(data.accounts || [])
}
});
// useEffect
useEffect(() => {
if (searchTerm) {
const results = allAccounts.filter((c => c.name.toLowerCase().includes(searchTerm)))
setSearchedAccounts(results)
}
}, [searchTerm, searchedAccounts])
// example query result (more than 1)
{
"accounts": [
{
"id": "5deed7df947204960f286010",
"name": "Acme Test Account",
"status": "active",
"company": {
"id": "5de84532ce5373afe23a05c8",
"name": "Acme Inc.",
"__typename": "Company"
},
"__typename": "Account"
},
]
}
// render
{searchedAccounts.map(c => (
<>
<ListItem
dense
button
className={classnames({ [classes.selectedAccountContext]: c.id === accountContextId })}
key={c.id}
onClick={() => accountClicked(c.id)}
>
<ListItemText
primary={c.name}
secondary={
<>
<span>{c.companyName}</span>
<span className="d-flex align-items-center top-margin-tiny">
<Badge
color={c.status === 'active' ? "success" : "danger"}
style={{ marginBottom: 0 }}
>
{c.status.replace(/^\w/, c => c.toUpperCase())}
</Badge>
<span className='ml-auto'>
<SvgIcon><path d={mdiMapMarkerRadius} /></SvgIcon>
<SMARTCompanyIcon />
</span>
</span>
</>
}
/>
</ListItem>
</>
))}
У меня есть компонент, который первоначально выбирает запрос и показывает результаты. Над списком есть поле ввода ввода. Когда вы начинаете печатать, он перерисовывает список фильтрации, если результаты списка найдены. В настоящее время он работает так, что при поиске он ищет по c.name
, что является именем учетной записи.
Я пытался добавить к этому дополнительный код, но безуспешно. Я хочу иметь возможность поиска не только по c.name
, но и c.companyName
и убедиться, что он не учитывает регистр. В настоящее время, если значение имеет заглавную букву, оно не находит его. Надеюсь, что это имеет смысл.