surajitbasak109

constructor(props) {
    super(props);
    this.state = {
      // ... more code ...
    };
    this.autocomplete = this.autocomplete.bind(this);
    this.hanldeKeyup = this.hanldeKeyup.bind(this);
}

surajitbasak109

autocomplete(evt) {
    // ... more code ...
}
hanldeKeyup(evt) {
    // event code 27 means escape key
    if (evt.keyCode === 27) {
        this.setState({ searchItems: [] });
        return false;
    }
}

surajitbasak109

const SearchItemsList = ({
  searchItems,
}) => {
  return (
    <ul className="list-group">
      {searchItems.map((item, idx) => (
        <li
          className="list-group-item"
          key={idx}
        >

surajitbasak109

<input
    type="text"
    id="autocomplete"
    onChange={this.autocomplete}
/>
{searchItems.length > 0 && (
    <SearchItemsList
        searchItems={searchItems}
    />
)}

surajitbasak109

import React from 'react'
​
const SearchItemsList = () => {
  return (
    <div>
      hello from search item list
    </div>
  )
}
​

surajitbasak109

<label htmlFor="autocomplete">Item Name</label>
<input
  type="text"
  id="autocomplete"
  onChange={this.autocomplete}
  value={name}
  className="custom-input form-control"
/>

surajitbasak109

constructor(props) {
    super(props);
    // ... more code ...
    this.autocomplete = this.autocomplete.bind(this);
}

surajitbasak109

{// ... more code ...}
<input
    type="text"
    id="autocomplete"
    onChange={this.autocomplete.bind(this)}
    value={name}
    className="custom-input form-control"
    />
{// ... more code ...}

surajitbasak109

constructor(props){
    // ... more code ...
}
autocomplete(evt) {
    let text = evt.target.value;
    fetch(`http://localhost:3004/items?name_like=${text}&_limit=6`)
        .then(res => res.json())
        .then(data => {
        this.setState({ searchItems: data });
    });

surajitbasak109

return (
    <div className="container mt-3">
        <h1 className="h2 text-center">Autocomplete Example</h1>
        <div className="form-group">
            <label htmlFor="autocomplete">Item Name</label>
            <input
                type="text"
                id="autocomplete"
                value={name}
                className="custom-input form-control"