I'm using ReactJs, Material-UI autocomplete with 20000 options for select. Each option represented as object with portfolio, country and assetType.
const options = [{portfolio: 'test_index', country: 'Austria', assetType: 'index'},
{ portfolio: 'Italy $1M Turnover StdTurn btm 10 Middle of Quarter LCL', country: 'Italy', assetType: 'portfolio'},
{ portfolio: 'Israel $1M Turnover StdTurn top 20 Middle of Quarter LCL', country: 'Italy', assetType: 'portfolio'},
{ portfolio: 'United States $1M Turnover ROE top 20 Middle of Quarter LCL', country: 'Italy', assetType: 'portfolio'}]
I need to filter options by 'portfolio'. Filter should work like contain. Such that if type Italy Middle or Middle Italy i get this responce 'Italy $1M Turnover StdTurn btm 10 Middle of Quarter LCL'
Material-ui recommend several options : createFilterOptions and match-sorter
<Autocomplete
filterOptions={filterOptions}
size="small"
id="assets_async_autocmplete"
className={classes.root}
disableListWrap
sx={{ width: 365 }}
open={open}
PopperComponent={StyledPopper}
ListboxComponent={ListboxComponent}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
isOptionEqualToValue={(option, value) => option === value}
getOptionLabel={(option) => option.portfolio}
options={options}
loading={loading}
renderOption={(props, option) => (
<Stack
key={option.portfolio}
justifyContent="center"
>
<SearchRowContainer saveAssetId={saveAssetId} props={props} favorites={favorites} option={option} />
<hr className={style.delimeter} />
</Stack>
)}
renderInput={(params) => (
<RenderInput params={params} loading={loading} />
)}
popupIcon={<GlassIcon />}
/>
Can anybody suggest efficient way\library to filter the options. Thanks in advance