Autosuggest

The autosuggest component assists users in query creation and completion by searching a dynamic list for related keywords, phrases and items.

Default

This is the most basic method of displaying suggestions.

Note that they can be indented (to indicate topology for example) - type "a" to see this demonstrated by the Glasgow office suggestion.

Storybook failed to load.

Icons

You can insert a Backpack icon next to each suggestion, useful for differentiation e.g. between airports, cities, and countries.

Storybook failed to load.

Subheadings

Additional suggestion information can be displayed as a subheading.

Storybook failed to load.

Tertiary label

If subheadings are not enough, you can add some tertiary information too.

Storybook failed to load.

Combination

This example shows all of the above combined.

Storybook failed to load.

bpk-component-autosuggest

Backpack autosuggest component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import { Component } from 'react';
                                                import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
                                                import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
                                                import FlightIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/flight';
                                                import BpkAutosuggest, { BpkAutosuggestSuggestion } from '@skyscanner/backpack-web/bpk-component-autosuggest';
                                                
                                                const BpkFlightIcon = withRtlSupport(FlightIcon);
                                                
                                                const offices = [
                                                  {
                                                    name: 'Barcelona',
                                                    code: 'BCN',
                                                    country: 'Spain',
                                                  },
                                                  ...
                                                ];
                                                
                                                const getSuggestions = (value) => {
                                                  const inputValue = value.trim().toLowerCase();
                                                  const inputLength = inputValue.length;
                                                
                                                  return inputLength === 0 ? [] : offices.filter(office =>
                                                    office.name.toLowerCase().indexOf(inputValue) !== -1,
                                                  );
                                                };
                                                
                                                const getSuggestionValue = ({ name, code }) => `${name} (${code})`;
                                                
                                                const renderSuggestion = suggestion => (
                                                  <BpkAutosuggestSuggestion
                                                    value={getSuggestionValue(suggestion)}
                                                    subHeading={suggestion.country}
                                                    tertiaryLabel="Airport"
                                                    indent={suggestion.indent}
                                                    icon={BpkFlightIcon}
                                                  />
                                                );
                                                
                                                class MyComponent extends Component {
                                                  constructor() {
                                                    super();
                                                
                                                    this.state = {
                                                      value: '',
                                                      suggestions: [],
                                                    };
                                                
                                                  }
                                                
                                                  onChange = (e, { newValue }) => {
                                                    this.setState({
                                                      value: newValue,
                                                    });
                                                  }
                                                
                                                  onSuggestionsFetchRequested = ({ value }) => {
                                                    this.setState({
                                                      suggestions: getSuggestions(value),
                                                    });
                                                  }
                                                
                                                  onSuggestionsClearRequested = () => {
                                                    this.setState({
                                                      suggestions: [],
                                                    });
                                                  }
                                                
                                                  render() {
                                                    const { value, suggestions } = this.state;
                                                
                                                    const inputProps = {
                                                      id: 'my-autosuggest',
                                                      name: 'my-autosuggest',
                                                      placeholder: 'Enter an office name',
                                                      value,
                                                      onChange: this.onChange,
                                                    };
                                                
                                                    return (
                                                      <div>
                                                        <BpkLabel htmlFor="my-autosuggest">Office</BpkLabel>
                                                        <BpkAutosuggest
                                                          suggestions={suggestions}
                                                          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                                                          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                                                          getSuggestionValue={getSuggestionValue}
                                                          renderSuggestion={renderSuggestion}
                                                          inputProps={inputProps}
                                                        />
                                                      </div>
                                                    );
                                                  }
                                                }

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.