Searchable sections of options but also not displayed
github-jeff opened this issue · 5 comments
I'm probably pushing it, but here is the scenario and maybe there is a way. I have a super long list of objects for the dropdown menu in the the usual {label: "...", name: "...", value: "..."} format. The visible field {label: "..."} is searchable and everything works great. What I would like is to include other information on that object such as {lastname: "..."}, not show it in the dropdown, but yet still let that hidden information remain searchable.
For example say I have a list of 1000 projects, each segmented out by lead engineer. What I would like to do is let a user search by say lead engineer {lastname: "..."} and then also by project {label: "..."}, to get a much shorter list of remaining projects from which to chose.
searchBy is likely the right choice for this application. It's not clear how to use it though in the documentation. I tried the following.
options={projectOptions} // this object contains props as stated above.
searchBy={lastname} //Err: This does not work as it does not find the lastname prop
options={projectOptions}
searchBy={projectOptions.lastname} //Ignored: This does not search on the lastname prop
I was hoping for something like:
options={projectOptions}
searchBy={label, lastname}
Or:
options={projectOptions}
mySearchKeys={label, lastname}
searchBy={mySearchKeys}
UPDATE:
options={projectOptions}
searchBy="lastname" // This works if I put the field in quotes, however then it only searches that one field and nothing else.
I suppose I could just do a merge on the new keyfield something like:
const projectOptions = [
...
searchFields: 'projectName lastName'
],
then do a:
`searchBy="searchFields"
Looks like I am headed into searchFn. I'll give that a go and reach back out if/when there is trouble.
https://sanusart.github.io/react-dropdown-select/examples the last one there is the search override