react-autosuggest-plus-redux-form.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import AutoSuggest from 'react-autosuggest';
import styles from './styles.css';

const suggestions = [
  { label: 'Apple', value: 1 },
  { label: 'Aqua', value: 2 },
  { label: 'Banana', value: 3 },
  { label: 'Bean', value: 4 },
  { label: 'Date', value: 5 },
];

class Input extends React.PureComponent {
  constructor (props) {
    super(props);
    this.state = {
      filteredSuggestions: [],
    };
  }

  handleFetch = ({ value }) => {
    const { suggestions } = this.props;
    const filteredSuggestions = suggestions.filter(
      ({label}) => label.toLowerCase().startsWith(value)
    );
    this.setState({ filteredSuggestions });
  }

  handleClear = () => {
    this.setState({ filteredSuggestions: [] });
  }

  handleGetSuggestion = (props) => {
    return props.label;
  }

  handleSuggestionHighlighted = ({ suggestion }) => {
    this.setState({ highlightedSuggestion: suggestion });
  }

  renderSuggestion = (props) => {
    return (
      <span>{props.label}</span>
    );
  }

  handleSuggestionSelected = (event, { suggestionValue, method }) => {
    const { input } = this.props;
    input.onChange(suggestionValue);
    if (method === 'enter') {
      event.preventDefault();
    }
  }

  render () {
    const { input } = this.props;
    const { filteredSuggestions } = this.state;
    return (
      <AutoSuggest
        suggestions={filteredSuggestions}
        onSuggestionsFetchRequested={this.handleFetch}
        onSuggestionsClearRequested={this.handleClear}
        getSuggestionValue={this.handleGetSuggestion}
        renderSuggestion={this.renderSuggestion}
        onSuggestionHighlighted={this.handleSuggestionHighlighted}
        onSuggestionSelected={this.handleSuggestionSelected}
        inputProps={input}
      />
    );
  }
}

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component={Input}
            suggestions={suggestions}
          />
        </div>
      </div>
      {/*
      <div>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="Email"
          />
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label>
            <Field name="sex" component="input" type="radio" value="male" />
            {' '}
            Male
          </label>
          <label>
            <Field name="sex" component="input" type="radio" value="female" />
            {' '}
            Female
          </label>
        </div>
      </div>
      <div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select">
            <option />
            <option value="ff0000">Red</option>
            <option value="00ff00">Green</option>
            <option value="0000ff">Blue</option>
          </Field>
        </div>
      </div>
      <div>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field
            name="employed"
            id="employed"
            component="input"
            type="checkbox"
          />
        </div>
      </div>
      <div>
        <label>Notes</label>
        <div>
          <Field name="notes" component="textarea" />
        </div>
      </div>
      */}
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);

moroshko/react-autosuggest#399