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.