icaroscherma
commented
3 years ago Hey @AlexBasile123 , just a few recommendations:
- If you check issue #171 I showed how to use
fuzzySearchas your main search filter engine - When you're pasting some code on Github, please use one of the flavoured markdown helpers:
- For inline code, like this:
useSelect({});you should one ONEgrave accent characterat the beginning and another one at the end of your code. - For block code (what I used in issue 171 and what I will use below), you have to start the line with 3
grave accent character, tell which language you're working on, break line, paste your code and then 3grave accent characters again.
- For inline code, like this:
getOptionsit's a way to use ajax to query your results, if you have the whole list with you, just useoptionsand bothsearchandfilterOptionswill do the trick for you.
So, to fix your issue, I believe you will need:
import React;
import SelectSearch, {fuzzySearch} from 'react-select-search';
const [value, setValue] = React.useState('');
const options = [
// your options here
];
return <div>
<SelectSearch
value={value}
options={options}
onChange={setValue}
search
filterOptions={fuzzySearch}
closeOnSelect={false}
placeholder="Type in your search criteria"
/>
</div>;
AlexBasile123
tbleckert
First, I want to say that I really like the minimal approach and yet a lot of features.
I've been playing around w/ it for a while and now questioning whether it can handle my needs.
My needs are pretty simple:
Originally I was looking for an event on each key press. Then reading through the past issues I've picked up on using getOptions() to get search query (per key stroke) and update both the options (from 3 collections) and update grid below.
Shortly after I ran into infinite rerendering issue, where updating the options, updates the state, which updates this component and it's options, rinse repeat. I've resolved it by separating the context of state and dispatch; as well as checking that the previous query was different from the current query.
Afterwards, working on selecting an option was straightforward at first. i.e. onChange(). But then ran into an issue w/ showing the selection in the search text box. The search text box would clear and typing into it again wouldn't work the same. I've tried closeOnSelect=false, which would keep at least show the selection option.
Then going back to the api I thought maybe there's a better way to interact w/ this component:
I'm assuming my needs are not unusual and my approach may needs some work. If not, maybe I'm asking for too much from this compact component. Thank you in advance for your advise! Really appreciate it.
------- Snippet ----- <SelectSearch value={selectedValue} options={searchEntities} search closeOnSelect={false} placeholder="Type in your search criteria" onChange={(query) => { previousSearchQuery = ''; // attempt to block reloading getOptions setSearchQuery(query); } } filterOptions={(options) => { return new Promise((resolve, reject) => { change(searchQuery) // updates dropdown options and grid below .then(resolve(searchEntities)) .catch(reject);
}) } } getOptions={(query) => { return new Promise((resolve, reject) => { searchQuery = query; // assign to state resolve(searchEntities); }); }} />