import { SearchInput } from '@uhg-abyss/mobile';

label

hintText

helpContent

() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [value, setValue] = useState('');
  const [results, setResults] = useState<any[]>([]);

  const handleSubmit = () => {
    console.log(results);
  };

  return (
    <SearchInput
      label="Search Sandbox"
      value={value}
      onChangeText={setValue}
      onChange={setResults}
      onSubmit={handleSubmit}
      options={data}
      keys={['label']}
    />
  );
};

useState

Using the useState hook sets state for the component.

onChange

The onChange prop handles the action for the search results.

Fuse.js

Search Input filtering uses the Fuse.jsopens in a new window library to fuzzy filter results. What is fuzzy searching? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

Fuse Configurations

To adjust the fuse configurations, pass the desired options into the fuseConfigs prop. Note that keys is required when using fuse. By default the fuse search configurations are:

{
  includeMatches: true,
  findAllMatches: true,
  threshold: 0,
  ignoreLocation: true,
  minMatchCharLength: searchText.length,
  keys,
}

The default configurations return the search results object below:

{
  item: []
}

Fuse Data

The options prop is the information that fuse will filter on and display in the search dropdown. You can search on any value(s) in the object, see Fuse Keys below. Required when using fuse.

Fuse Keys

List of keys that will be searched. This supports nested paths, weighted search, searching in arrays of objects. Required when using fuse. Below the keys set are "label" and "value".

Custom Filtering

Use the customFilter prop to override the fuse.js filtering. In the example function below, the filter is checking the first letter typed in the search bar against the first letter of each item in the list. If the letter is a match the item is included in the filtered list.

SearchInput Props

Name	Type	Default	A11y	Description
customFilter	((searchText: string, options: any[]) => any[]) | undefined			Custom function used for search
fuseConfigs	IFuseOptions<any> | undefined			Configs for Fuse
helpButtonAccessibilityLabel	string | undefined			Set the accessibility label for the help button
helpContent	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined			When defined, displays a help icon that can be tapped to view the provided content in a modal screen
hintText	string | undefined			Set the text displayed below label
keys	FuseOptionKey<any>[] | undefined			List of keys to search through
label	string | undefined			Label for input field
onChange	((value: any[]) => void) | undefined			Callback fired every time the value changes
onChangeText	((input: string, inputValidations?: Record<string, boolean> | null | undefined) => void) | undefined			Callback that is called when the input field text changes. Changed text is passed as a single string argument to the callback handler. Additionally, it receives an object with validation rules and their results.
onSubmit	((values: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void) | undefined			Callback fired every time the input is submitted
options	any[] | undefined	[]		List of options available to search through
placeholder	string | undefined			Short description displayed in the input before the user enters a value
showValidations	boolean | undefined	true		Flag to show validations below the input field
value	string | undefined			Value of the search input

SearchInput Classes

Extends Abyss - InputField Classes

Class Name	Description
abyss-input-field	Input container
abyss-input-field-cancel-button	Cancel button
abyss-input-field-cancel-icon	Cancel icon
abyss-input-field-container	The container around the input field
abyss-input-field-header	Header element
abyss-input-field-help-button	Help button
abyss-input-field-help-modal	Help modal
abyss-input-field-hint-text	Input hint text
abyss-input-field-icon-button	Icon button
abyss-input-field-label	Label element
abyss-input-field-message	Message element
abyss-input-field-prefix	Prefix text
abyss-input-field-requirements-text	Requirements text
abyss-input-field-root	Root element
abyss-input-field-show-password-icon	Show password icon
abyss-input-field-validation-checked-icon	Valid icon
abyss-input-field-validation-container	Validation container
abyss-input-field-validation-text	Validation text
abyss-input-field-validation-unchecked-icon	Invalid icon
abyss-input-help-icon	Help icon element
abyss-input-help-modal-close-button	Help modal close button
abyss-input-help-modal-footer	Help modal footer
abyss-input-message-icon	Message icon
abyss-input-message-text	Message text
abyss-search-input-root	SearchInput root element