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] = React.useState('');
  const [results, setResults] = useState([]);

  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

Prop Name	Type	Default	Description
customFilter	function	-	Custom function used for search
fuseConfigs	shape	-	Configs for Fuse
helpButtonAccessibilityLabel	string	-	Set the accessibility label for the help button
helpContent	string | ReactNode	-	When defined, displays a help icon that can be tapped to view the provided content in a modal screen
hintText	string	-	Set the text displayed below label
keys	array[string]	[]	Keys used by Fuse
label	string	-	Label for input field
onBlur	function	-	Callback fired every time the component is unfocused
onChange	function	-	Callback fired when search is changed
onChangeText	function	-	Callback that is called when the text input text changes. Changed text is passed as a single string argument to the callback handler
onFocus	function	-	Callback fired every time the component is focused
onSubmit	function	-	Callback fired when input is submitted
options	object[]	[]	Data filtered on by Fuse
returnKeyLabel	string	search	Sets the label of the return key. Defaults to "search"
returnKeyType	string	search	Sets the type of return key
value	string	-	Value of the text input

SearchInput Classes

Extends Abyss - InputField Classes

Class Name	Description
abyss-search-input-root	SearchInput root element