surajitbasak109

import React from "react";
​
const SearchItemsList = ({ searchItems, cursor, selectItem }) => {
    // ... more code ...   
}

surajitbasak109

hanldeKeydown(evt) {
  // ... more code ...
}
selectItem(id) {
  const { searchItems } = this.state;
  let selectedItem = searchItems.find(item => item.code === id);
  const { code, name, unit, rate } = selectedItem;
  this.setState({ item: { code, name, unit, rate }, searchItems: [] });
}

surajitbasak109

hanldeKeydown(evt) {
  // ... more code ...
  if (evt.keyCode === 8) {
    this.setState({ item: { name: "", code: "", rate: "", unit: "" } });
  }
}

surajitbasak109

hanldeKeydown(evt) {
  const { cursor, searchItems } = this.state;
  // ... more code ...
  if (evt.keyCode === 13) {
    let currentItem = searchItems[cursor];
    if (currentItem !== undefined) {
      const { name, code, rate, unit } = currentItem;
      this.setState({ item: { name, code, rate, unit }, searchItems: [] });
    }
  }

surajitbasak109

<ul className="list-group">
  {searchItems.map((item, idx) => (
    <li
      className={cursor === idx ? "active list-group-item" : "list-group-item"}
      key={idx}
    >
      {item.name}
    </li>
  ))}
</ul>;

surajitbasak109

{searchItems.length > 0 && (
    <SearchItemsList
        searchItems={searchItems}
        cursor={cursor} />
  )}

surajitbasak109

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

surajitbasak109

constructor(props) {
  super(props);
  this.state = {
    item: {
        //...more code...
    },
    cursor: 0,
    // ...more code...
  };
  // ...more code...

surajitbasak109

hanldeKeyup(evt) {
    //...more code...
}

hanldeKeydown(evt) {
  const { cursor, searchItems } = this.state;
  // arrow up/down button should select next/previous list element
  if (evt.keyCode === 38 && cursor > 0) {
    this.setState(prevState => ({
      cursor: prevState.cursor - 1

surajitbasak109

constructor(props) {
    super(props);
    this.state = {
        item: {
            // ... more code ...
        },
        cursor: 0,
      // ... more code ...
    };
    // ... more code ...