Try any Node.js package right in your browser

Share this code:

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-autosuggest with all npm packages installed. Try it out:

This function gets the suggestion in question, and it should return a string. For example:

function getSuggestionValue(suggestion) {
return suggestion.text;
}

renderSuggestion (required)

Use your imagination to define how suggestions are rendered.

The signature is:

function renderSuggestion(suggestion, { query, isHighlighted })

where:

suggestion - The suggestion to render

query - Used to highlight the matching string. As user types in the input, query will be equal to the trimmed value of the input. Then, if user interacts using the Up or Down keys, the input will get the value of the highlighted suggestion, but query will remain to be equal to the trimmed value of the input prior to the Up and Down interactions.

Important:renderSuggestion must be a pure function (we optimize rendering performance based on this assumption).

inputProps (required)

Autosuggest is a controlled component. Therefore, you MUST pass at least a value and an onChange callback to the input. You can pass any other props as well. For example:

const inputProps = {
value, // usually comes from the application state
onChange, // called every time the input value changes
onBlur, // called when the input loses focus, e.g. when user presses Tab
type: "search",
placeholder: "Enter city or postcode"
};

inputProps.onChange (required)

The signature is:

function onChange(event, { newValue, method })

where:

newValue - the new value of the input

method - string describing how the change has occurred. The possible values are:

'down' - user pressed Down

'up' - user pressed Up

'escape' - user pressed Escape

'enter' - user pressed Enter

'click' - user clicked (or tapped) on suggestion

'type' - none of the methods above (usually means that user typed something, but can also be that they pressed Backspace, pasted something into the input, etc.)

inputProps.onBlur (optional)

The signature is:

function onBlur(event, { highlightedSuggestion })

where:

highlightedSuggestion - the suggestion that was highlighted just before the input lost focus, or null if there was no highlighted suggestion.

onSuggestionSelected (optional)

This function is called when suggestion is selected. It has the following signature:

When shouldRenderSuggestions returns true, suggestions will be rendered only when the input is focused.

If you would like to render suggestions regardless of whether the input is focused or not, set alwaysRenderSuggestions={true} (shouldRenderSuggestions is ignored in this case).

alwaysRenderSuggestions (optional)

Set alwaysRenderSuggestions={true} if you'd like to always render the suggestions.

Important: Make sure that the initial value of suggestions corresponds to the initial value of inputProps.value. For example, if you'd like to show all the suggestions when the input is empty, your initial state should be something like:

this.state = {
value: "",
suggestions: allSuggestions
};

highlightFirstSuggestion (optional)

When highlightFirstSuggestion={true}, Autosuggest will automatically highlight the first suggestion. Defaults to false.

focusInputOnSuggestionClick (optional)

By default, focusInputOnSuggestionClick={true}, which means that, every time suggestion is clicked (or tapped), the input keeps the focus.

On mobile devices, when the input is focused, the native keyboard appears. You'll probably want to lose the focus when suggestion is tapped in order to hide the keyboard.

You can do something like this:

<Autosuggest focusInputOnSuggestionClick={!isMobile} ... />

where isMobile is a boolean describing whether Autosuggest operates on a mobile device or not. You can use kaimallea/isMobile, for example, to determine that.

multiSection (optional)

By default, Autosuggest renders a plain list of suggestions.

If you'd like to have multiple sections (with optional titles), set multiSection={true}.

renderSectionTitle (required when multiSection={true})

When rendering multiple sections, you need to tell Autosuggest how to render a section title.

This function gets the section to render (an item in the suggestions array), and it should return a string or a ReactElement. For example:

Note: When using renderInputComponent, you still need to specify the usual inputProps. Autosuggest will merge the inputProps that you provide with other props that are needed for accessibility (e.g. 'aria-activedescendant'), and will pass the merged inputProps to renderInputComponent.

renderSuggestionsContainer (optional)

You shouldn't specify renderSuggestionsContainer unless you want to customize the content or behaviour of the suggestions container beyond rendering the suggestions themselves. For example, you might want to add a custom text before/after the suggestions list, or to customize the scrolling behaviour of the suggestions container.

When renderSuggestionsContainer returns a composite component (e.g. <IsolatedScroll ... /> as opposed to a DOM node like <div ... />), you MUST call containerProps.ref with the topmost element that the composite component renders.