boundless-typeahead v1.1.0

THIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.

Typeahead

Intelligently recommend entities via customizable, fuzzy recognition.

Typeahead is an enhancement upon Input which provides two built-in matching algorithms ("fuzzy" [default] and "starts-with") and supports the use of custom matching and marking functions.

In the examples below, imagine the <> in the "marks" section is a wrapping <mark> element:

1. "Starts-with" matching & marking

   <Typeahead
       algorithm={Typeahead.mode.STARTS_WITH}
       entities={[
           {text: 'apple'},
           {text: 'apricot'},
           {text: 'grape'},
       ]}
       inputProps={{value: 'a'}} />

   • matches: "apple", "apricot"
   • marks: "<a>pple", "<a>pricot"

2. "Fuzzy" matching & marking

   <Typeahead
       algorithm={Typeahead.mode.FUZZY}
       entities={[
           {text: 'apple'},
           {text: 'apricot'},
           {text: 'grape'},
       ]}
       inputProps={{value: 'a'}} />

   • matches: "apple", "apricot", "grape"
   • marks: "<a>pple", "<a>pricot", "gr<a>pe"

3. Custom matching & marking

   Optionally, you can provide your own combination of matching and marking functions. For example, loosening the matching to include unicode variants of characters could be useful, e.g. ç → c

   <Typeahead
       algorithm={{
           matcher: yourMatchFunc,
           marker: yourMarkFunc,
       }} />

Component Instance Methods

When using Typeahead in your project, you may call the following methods on a rendered instance of the component. Use refs to get the instance.

• focus() focuses the browser oon the underlying textual input for immediate text entry

• getInputNode() returns the raw underlying textual input DOM node

• getSelectedEntityText() returns the text property of the currently highlighted entity (from props.entities), or returns an empty string

• getValue() retrieves the current value of the underlying textual input

• select() programmatically creates a full selection on the underlying textual input such that a press of the Backspace key would fully clear the input

• setValue(value: string) sets the underlying textual input to the specified text and updates internal state; do not use this method when using Typeahead as a "controlled input"

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props