search

ukrbublik / react-awesome-query-builder

User-friendly query builder for React
https://ukrbublik.github.io/react-awesome-query-builder
MIT License
2.01k stars 500 forks source link

Need an event once user start typing on drop down for multi select items. #616

Closed RabibKhan closed 2 years ago

RabibKhan commented 2 years ago

Hi, I am looking for some event which trigger once user start typing on search for multi select combo box in react-awsome-query-builder. My requirement is once user start typing on search in combo box i need to retrieve data for each keystroke from a source and populate it in as a combo list.

ukrbublik commented 2 years ago

Do you use Material UI? I've added support of server-side autocomplete for single select box (see asyncFetch https://github.com/ukrbublik/react-awesome-query-builder/pull/471). Adding such sopport for multi select is in my todo list. (And adding support of antdesign/bootstrap is also in todo list) Would this resolves your issue in better way than adding event for user type?

RabibKhan commented 2 years ago

i am using react-awesome-query-builder multiselect drop down. My requirement is to retrieve different categories(sub categories) of any product which are quite large in numbers. i can't retrieve all data in one async call. that's the reason i am looking for some event in multiselect combo when user start typing on combo search so that i can retrieve data for each key stroke with some timer delay..

ukrbublik commented 2 years ago

Which of the following configs do you use?

RabibKhan commented 2 years ago

I used second one.

import AntdConfig from 'react-awesome-query-builder/lib/config/antd';

bsekachev commented 2 years ago

Hi @ukrbublik

First of all, thank you for development this library, we are using it in Computer Vision Annotation Tool and it makes development of filtering-related features significantly easier.

During development I met the same issue like described above. Async fetching a list of values for select does not work if use Antd config, but works if use for example Material design. Unfortunatly, since our product uses Antd, Material is not option for us.

But, I see that the issue has been already solved and only would like to know when a new release version is coming and what major number will it have?

ukrbublik commented 2 years ago

@bsekachev Released 5.1.0 Thanks for using my lib in CVAT! If you are looking/waiting for another features/fixes, please let me know.

RabibKhan commented 2 years ago

I used second one.

import AntdConfig from 'react-awesome-query-builder/lib/config/antd';

@bsekachev Released 5.1.0 Thanks for using my lib in CVAT! If you are looking/waiting for another features/fixes, please let me know.

I used second one.

import AntdConfig from 'react-awesome-query-builder/lib/config/antd';

@ukrbublik do you have some working example for asyncfetch for Antd? in my case i need to fetch dropdown list from server using restful api call...

SMNaik123 commented 1 year ago

I used second one. import AntdConfig from 'react-awesome-query-builder/lib/config/antd';

@bsekachev Released 5.1.0 Thanks for using my lib in CVAT! If you are looking/waiting for another features/fixes, please let me know.

I used second one. import AntdConfig from 'react-awesome-query-builder/lib/config/antd';

@ukrbublik do you have some working example for asyncfetch for Antd? in my case i need to fetch dropdown list from server using restful api call...

@RabibKhan,@ukrbublik I have similar requirements of fetching the values from an api to populate autocomplete list. Is this feature available to use? If so, how do we do this. Also, is there a way to get the field name that is triggering the async call. (I have option to use Material or Antd config)

Any sample code that can be shared for this will be really helpful!

ukrbublik commented 1 year ago

Sample code of using async fetch with server API can be found in sandbox_next demo app

Server API: https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/sandbox_next/pages/api/autocomplete.ts#L17 asyncFetch implementation for client: https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/sandbox_next/components/demo/config_ctx.tsx#L13 Config: https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/sandbox_next/lib/config_base.ts#L172 https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/sandbox_next/lib/config.tsx#LL35C3-L35C15