@koliseoapi/react-autocomplete

react-autocomplete

An autocompleter that displays options and responds to keyboard input (up, down, enter, esc). Inspired in React Autocomplete, but designed for a simplified workflow where requests are expected to be Promises.

Check the demo here.

Use

import Autocomplete from "@koliseoapi/react-autocomplete";

// render one item on the list
const MyItemView = function({ item }) {
  return (
    <div className="user-data">
      <div>{item.id}</div>
      <div>{item.name}</div>
    </div>
  );
};

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: undefined
    };
    this.onChange = this.onChange.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }

  // invoked when the user types something. A delay of 200ms is
  // already provided to avoid DDoS'ing your own servers
  onChange(query) {
    // you would normally do here your server access
    fetch("/users/search?q=" + query).then(result => {
      this.refs.autocomplete.setItems(result.body);
    });
  }

  // called when the user clicks an option or hits enter
  onSelect(user) {
    this.setState({
      selectedUser: user
    });
    // the returned value will be inserted into the input field.
    // Use an empty String to reset the field
    return user.getName();
  }

  render() {
    return (
      <div>
        <Autocomplete
          ref="autocomplete"
          renderItem={MyItemView}
          onChange={this.onChange}
          onSelect={this.onSelect}
        />
      </div>
    );
  }
}

Develop

npm i

# to develop
npm run watch