Does QueryBuilder allow the input field to be set as an autocomplete select input field ?

[keerthankrishna]

I am looking for a select input field which will fetch data from a JSON and will also be an autocomplete select text input - I'm not sure if this is possible looking at the documentation provided but wanted to reach out.

Example:

1. I have a field called instruments
2. If I select that and if I select "in" under the "Operator" selection
3. Now, for the "value" field I am wanting it to be a text input but if i type "pi".. then it should show me all the input values that have a "pi" text.. like "piano". Similarly if i just type in "p" then i would need to get "timpani", "piano", "trumpet", "xylophone", "saxophone"

[jakeboone02]

There are a few autocomplete components out there that you can use with this library. I generally use react-select, either the standard Select component or the Async component if I need to load options asynchronously from an API.

Here is an example of a custom ValueEditor that uses react-select when the field is "autocomplete" and falls back to the default ValueEditor. The list fakes a delay for an API call with setTimeout and then loads the options that match what the user has typed.

https://codesandbox.io/s/broken-snow-b78i8f?file=/src/MyValueEditor.tsx

import { ValueEditor, ValueEditorProps } from 'react-querybuilder';
import type { GroupBase, OptionsOrGroups } from 'react-select';
import AsyncSelect from 'react-select/async';

const options = [
  { value: 'v1', label: 'abc' },
  { value: 'v2', label: 'def' },
  { value: 'v3', label: 'ghi' },
  { value: 'v4', label: 'jkl' },
  { value: 'v5', label: 'mno' },
  { value: 'v6', label: 'pqr' },
  { value: 'v7', label: 'stu' },
  { value: 'v8', label: 'vwx' },
  { value: 'v9', label: 'yz' },
];

const loadDelay = 500;

const loadOptions = (
  iv: string
): Promise<OptionsOrGroups<any, GroupBase<any>>> =>
  new Promise(r =>
    setTimeout(() => r(options.filter(op => op.label.includes(iv))), loadDelay)
  );

export const MyValueEditor = (props: ValueEditorProps) => {
  if (props.field === 'autocomplete') {
    return (
      <AsyncSelect
        loadOptions={loadOptions}
        onChange={v => props.handleOnChange(v)}
        value={props.value}
        options={options}
      />
    );
  }

  return <ValueEditor {...props} />;
};

[jakeboone02]

Yeah, it works the same without TypeScript. I usually use TS in examples because it's more expressive, but there's an equivalent JavaScript template here.

Each subfolder in the /examples folder has a README file with links to CodeSandbox and StackBlitz that automatically load that folder's code.

[keerthankrishna]

Thank you so much @jakeboone02 ! Everything is working correctly now.

I have a question regarding the below line of code which you added within the select in your CodeSandBox link (https://codesandbox.io/s/magical-voice-1e6uv3?file=/src/App.tsx:1168-1196). What does getOptionValue do and what happens when it is not put in there ?
getOptionValue={f => f.name}

I also have an issue when using this onChange function handleOnChange - I get the below error when the name becomes NULL (this happens when I clear selection in the react-select dropdown). How do I handle it ? The function seems to be an inbuilt QueryBuilder function that is being used ?

[jakeboone02]

getOptionValue is a react-select prop that resolves the options elements to a unique string (see docs here, sorry it doesn't allow direct linking to the prop). If it's not there then react-select doesn't know to look at the name property of each field; it will try to look at value instead.

I updated the codesandbox to allow for clearing the field selector. All I did was add optional chaining to the getOptionValue and onChange handlers so they wouldn't try to read a property from null.

    getOptionValue={f => f?.name}
    //                    ^
    onChange={v => props.handleOnChange(v?.name)}
    //                                   ^

[keerthankrishna]

Thank you so much @jakeboone02 ! Everything is working correctly now.

[jakeboone02]

Minor update, January 2024: RQB version 7 (currently v7.0.0-alpha.5) will accept value as the identifier property for option lists. name will be optional, but both will be present in all option list props passed down to subcomponents.

This will eliminate the need, for example, to use the getOptionValue prop in react-select implementations since it uses value by default.