react-md - Autocomplete By Api

index.html

<div id="app"></div>

react-md-autocomplete-by-api.markdown

react-md - Autocomplete By Api

This is a simple template for showing any issues that arise in react-md. It can also be a prototyping playground.

A Pen by roy barak on CodePen.

License.

script.babel

const {
  Autocomplete
} = ReactMD;

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

  componentDidMount() {
    this.callApi();
  }

  callApi() {
    let favoriteUsers = [1, 2, 3,4,5];
    let users = [];
    favoriteUsers.map(user => users.push(this.getUsers(user)));

    Promise.all(users)
      .then(results => {
        this.setState({
          users: results
        });
      })
      .catch(err => {
        console.log(res);
      });
  }
  getUsers(prmId) {
    let url = "https://jsonplaceholder.typicode.com/users/" + prmId;
    return fetch(url)
      .then(response => response.json())
      .then(users => {
        return users;
      });
  }
  render() {
    if (this.state.users.length > 1) {
      const { users } = this.state;
      //console.log(users);
    }

    return (
      <div className="md-text-container" style={{ marginTop: "10em" }}>
        <Autocomplete
          id="test-autocomplete"
          label="Autocomplete"
          dataLabel="name"
          autocompleteWithLabel
          placeholder="Search Users"
          data={this.state.users}
          onAutocomplete={(...args) => {
            this.setState({ test: args[0] });
            console.log(args);
          }}
          deleteKeys={[
            "id",
            "username",
            "email",
            "address",
            "phone",
            "website",
            "company"
          ]}
          simplifiedMenu={false}
          anchor={{
            x: Autocomplete.HorizontalAnchors.CENTER,
            y: Autocomplete.VerticalAnchors.TOP
          }}
          position={Autocomplete.Positions.BOTTOM}
        />
        <pre>{JSON.stringify(this.state.test, null, 2)}</pre>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

scripts

<script src="https://unpkg.com/react@15/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-md.js"></script>

style.scss

body {
  margin: 0;
}

html {
  width: 100%;
}



// simple styles for greeting
.greeting {
  left: 50%;
  margin: 1em;
  max-width: 320px;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
}

code {
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
}

styles

<link href="https://unpkg.com/[email protected]/dist/react-md.light_blue-pink.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons" rel="stylesheet" />