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.js 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	Required	Description
customFilter	(searchText: string, options: any[]) => any[] | undefined	-	-	Custom function used for search
fuseConfigs	Fuse.IFuseOptions<any> | undefined	-	-	Configs for Fuse
helpButtonAccessibilityLabel	string | undefined	-	-	Set the accessibility label for the help button
helpContent	React.ReactNode | 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	Fuse.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 ) => 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-search-input-root	SearchInput root element