Single Search

Used to search for a single result

<SingleSearch id="unique-id" onChange={console.log} placeholder="Placeholder" />

Props

Prop	Type	Default	Description
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
data-testid	string		data-testid given to the input element
disabled	bool	false	If true, the component is disabled.
error	bool	false	If true, the textfield will be displayed in an error state.
filterOptions	func		A function that determines the filtered options to be rendered on search. Signature:function(options: Array, state: object) => Array options: The options to render. state: The state of the component.
helperText	string		The helper text content.
loading	bool	false	If true, the component is in a loading state. This shows the loadingText in place of suggestions (only if there are no suggestions to show, e.g. options are empty).
onChange	func		Callback fired when the value changes.Signature:function(event: React.SyntheticEvent, value: T \| Array<T>, reason: string, details?: string) => voidevent: The event source of the callback.value: The new value of the component.reason: One of "createOption", "selectOption", "removeOption", "blur" or "clear".
onInputChange	func		Callback fired when the input value changes.Signature:function(event: React.SyntheticEvent, value: string, reason: string) => voidevent: The event source of the callback.value: The new value of the text input.reason: Can be: "input" (user input), "reset" (programmatic change), "clear".
options	array		Array of options.
placeholder	string		The short hint displayed in the input before the user enters a value.
renderOption	func		Render the option, use getOptionLabel by default.Signature:function(props: React.HTMLAttributes<HTMLLIElement>, option: Identity, state: object) => ReactNodeprops: The props to apply on the li element.option: The option to render.state: The state of the component.
style	{}		CSS properties applied to the autocomplete component.
sx	Array<func\| object>\| func\| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
value	Identity[]		The value of the autocomplete. The value must have reference equality with the option in order to be selected. *Due to the multiple prop (which must be set to true in order to show the chip) value will return an array of 1 item.

See MUI autocomplete for additional documentation.

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

// To supply the option type for TypeScript
<Search<Identity> options={options} ... />

Examples

Single Search

() => {
  const [loading, setLoading] = React.useState(false);
  const [searchText, setSearchText] = React.useState('');
  const debouncedText = useDebouncedValue(searchText);
  const [options, setOptions] = React.useState([]);
  const [value, setValue] = React.useState();
  React.useEffect(() => {
    if (searchText) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        setLoading(false);
        setOptions(
          data.searchData.filter((option) =>
            new RegExp(searchText, 'ig').test(
              `${option.firstName} ${option.lastName}`,
            ),
          ),
        );
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    } else {
      setOptions([]);
    }
  }, [debouncedText]);
  return (
    <SingleSearch
      id="people-single-search"
      helperText="Enter a name to search"
      loading={loading}
      onChange={(event, option) => setValue(option)}
      onInputChange={(e) => setSearchText(e?.target.value)}
      options={options}
      placeholder="Search"
      renderOption={(props, option) => (
        <SearchOptionCard
          {...props}
          disabled={option.disabled}
          disabledText={option.disabledText}
          avatarUrl={option.avatar}
          showAvatar
          title={`${option.firstName} ${option.lastName}`}
          subTitle={option.subTitle}
          type={option.type}
        />
      )}
      value={value}
    />
  );
};