[ ReactJs ] Auto Complete Text ( https://codesandbox.io/s/autocompletetext-2hyci )

App.css

.AutoCompleteText {
  width: 50%;
  border: 1px solid grey;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.73);
}

.AutoCompleteText input {
  width: 100%;
  border: none;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.73);
  padding: 10px 5px;
  box-sizing: border-box;
  outline: none;
}

.AutoCompleteText ul::before {
  content: '';
}

.AutoCompleteText ul {
  list-style-type: none;
  text-align: left;
  margin: 0;
  padding: 0;
  border: 1px solid grey;
}

.AutoCompleteText li {
  padding: 10px 5px;
  cursor: pointer;
}

.AutoCompleteText li:hover {
  text-decoration: underline;
  background-color: rgba(128, 128, 128, 0.2);
}

App.js

import React, { Component } from 'react';
import "./AutoCompleteText.css";

class AutoCompleteInput extends Component {
    constructor (props) {
        super (props)
        this.items  = [
            "Anmol",
            "Anurag",
            "Rohit",
            "Shaqulain",
            "Satish"
        ];
        this.state = {
            suggestions: [],
            text: ""
        }
    }

    onTextChange = (e) => {
        const value = e.target.value;
        let suggestions = [];
        if(value.length > 0) {
            const regex = new RegExp(`^${value}`, "i")
            suggestions = this.items.sort().filter( v => regex.test(v));
        }
        this.setState (() => ({
            suggestions,
            text: value
        }))
    }

    renderSuggestion = () => {
        const { suggestions } = this.state;
        if(suggestions.length === 0){
            return null
        }
        return (
            <ul>
                {suggestions.map((item, index) => <li key={index} onClick={() => this.suggestionSelected(item)}>{item}</li>)}
            </ul>
        )
    }

    suggestionSelected = (value) => {
        this.setState (() => ({
            text: value,
            suggestions: []
        }))
    }

    render() {
        const { text } = this.state
        return (
            <div className="AutoCompleteText">
                <input type="text" value={text} onChange={this.onTextChange} />
                {this.renderSuggestion()}
            </div>
        )
    }
}

export default AutoCompleteInput;