yet-another-react-autocomplete v2.1.4

yet-another-react-autocomplete

See a running example at http://pgrimard.github.io/yet-another-react-autocomplete/example/public/index.html

Install

npm install --save yet-another-react-autocomplete

Usage

import React from 'react';
import ReactDom from 'react-dom';
import AutoComplete from 'yet-another-react-autocomplete';

const displayFormat = (res) => res.Title;

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selection: null};
  }

  onSelectHandler = (result) => {
    this.setState({selection: result});
  };

  onErrorHandler = (error) => {
    this.setState({error: error});
  };

  onClearHandler = () => {
    this.setState({selection: null});
  };

  render() {
    return (
      <div>
        <AutoComplete
          path="http://www.omdbapi.com/?s="
          resultProperty="Search"
          placeholder="Search..."
          displayFormat={displayFormat}
          onSelect={this.onSelectHandler}
          onError={this.onErrorHandler}
          onClear={this.onClearHandler}/>
      </div>
    );
  }
}

Required Props

1. path (string) The backend path where a GET request will be made. The user input will be concatenated to this path, ie: /search/usersearchterm or /search?query=usersearchterm whatever the case may be.
2. onSelect (func) Function which will be passed the user selection.

Optional Props

1. resultProperty (string default is blank) Used to fetch a property from the server result if the result is an object instead of an array.
2. placeholder (string default is blank) Used as the placeholder text in the user input field.
3. minChars (number default is 3) Determines after how many minimum characters the backend should be queried.
4. displayFormat (func default is r=>r) Function which will be used to format the results returned from the server. If this property is not defined, then results will be returned as is.
5. onError (func default is ()=>{}) Function to be called if the xhr request fails.
6. onClear (func default is ()=>{}) Function to be called when the user clicks the clear icon.
7. className (string default is blank) Used to add additional style classes to underlying input.

Import Styling

@import "node_modules/yet-another-react-autocomplete/dist/styles/autocomplete.min.css"