I am building a search query builder with react-querybuilder and want to fetch the values of certain rules from an API. I also want the values field to be a filter and not just a dropdown, where users can input their filter string and results will appear in the dropdown. If we can make the results as multi-select then it would be better like shown in the image added. (https://i.sstatic.net/8tMHF.png) I researched on the react-querybuilder and found that it doesn't have the functionality that I'm trying to make. If anyone from the community can help, please reach out. Thanks
2 Answers
Maintainer of React Query Builder here. You can achieve this with a custom value editor. The best documentation I have on custom components right now is here. That walks you through creating a custom value editor for dates using react-datepicker, but the concept would be the same for any other React library.
There are no built-in data fetching features in RQB, so you'd need to build that on your own or use a library, but I would recommend react-select for its multiselect and async features.
The RQB home page actually has a multi-select example using react-select. The code for the component itself is here (simplified for brevity below), and usage is here.
const ExtendedValueEditor_Select = (props: ValueEditorProps) => {
return (
<Select
value={props.value}
isMulti
onChange={v => props.handleOnChange(v)}
options={selectOptions}
/>
);
};
Notes:
selectOptionsis an array of type{ value: string; label: string; }[].- This is almost certainly not the entire value editor you want—please see the "fallback" docs I mentioned earlier.
To use the component, assign it to valueEditor in the controlElements prop.
<QueryBuilder
fields={selectFields}
controlElements={{ valueEditor: ExtendedValueEditor_Select }}
/>
Feel free to file issues/discussions on GitHub or join the Discord chat if you have other questions about React Query Builder.
7 Comments
Aditya Pol
Hi Jake, Thanks for the all the references and documentation on how to add a multiselect for the "string" data types.
Aditya Pol
However I want to implement autocomplete multiselect only for the "string" datatype fields, other datatype fields should work as they used to before. Implementing the "fallback" for "string" has changed the default behaviour for "date" and "number", can you please guide me on how to achieve this?
Jake Boone
@AdityaPol I would need to see your code to determine what the issue is, assuming you followed the guide from the docs. I would recommend continuing this discussion in the RQB Discord chat or GitHub Discussions. You can mark this as the answer if it was helpful.
Aditya Pol
sure, @JakeBoone I have taken a look at the github discussions and found a similar use case, I will try to implement that solution. Thanks a lot for your help
F1Krazy
@AdityaPol Accepting an answer doesn't require reputation, but upvoting an answer does. I believe you may have accidentally pressed the upvote button instead of the accept button, which is the grey tick mark underneath the upvote/downvote buttons.
|
As I had the same use-case, I post my solution, built with MUI:
import Autocomplete from '@mui/material/Autocomplete'
import TextField from '@mui/material/TextField'
import {
useValueSelector,
type ValueEditorProps
} from 'react-querybuilder'
// replaces the default select component with a searchable
function SelectWithSearch({ handleOnChange, ...otherProps }: ValueEditorProps): React.ReactElement {
const { onChange } = useValueSelector({ listsAsArrays: true, multiple: true, handleOnChange })
if (otherProps.field === 'my.fieldName') {
return (
<Autocomplete
disableCloseOnSelect
options={googleCategories}
multiple
onChange={(event, value) => {
onChange(value.map((option) => option.name))
}}
sx={{ width: 'stretch' }}
renderInput={(params) => <TextField {...params} variant='standard' placeholder='Search and select' />}
/>
)
}
return <MaterialValueEditor handleOnChange={handleOnChange} {...otherProps} />
}
<QueryBuilder
fields={fields}
listsAsArrays
query={query}
onQueryChange={setQuery}
controlElements={{
...materialControlElements,
valueEditor: SelectWithSearch,
}}
/>
