How to make a tooltip type?

Hello.
The main question is:
1. How to make when entering information in a field (TextField from MaterialUI) to appear below the field window with the tips that ship with the server. At the same time that data from the field - the TextField is also sent to the server and sending the form.
Additional question:
2. Like when you click on one of the suggestions to fill the form with data that come from the server
March 23rd 20 at 19:31
2 answers
March 23rd 20 at 19:33
Solution
1. Hang a listener on the onChange that will make the appropriate request to the server. On the arrival of the data should be drawn. It is better to use debounce and check the minimum length of a string before the query.
2. Hang it on the tooltip listener onClick and change in the handler the value of the desired input.

A simple example of implementing this logic:
import React { useState, useRef, useCallback, useMemo } from 'react';
import debounce from 'lodash/debounce';
import { fetchSomeData } from './someplace';

const Example = () => {
 const [results setResults] = useState([]);
 const inputEl = useRef(null);

 const handleTintClick = useCallback((value) => {
 inputEl.current.value = value;
 }, [inputEl]);

 const handleInputChange = useMemo(() => debounce(e => {
 const { value } = e.target;

 if (value.length < 3) return;

fetchSomeData(value).then(setResults);
 }, 800), []);

 return (
<>
 <input ref={inputEl} onChange={handleInputChange} />
 {results.length > 0 && (
the <ul>
 {results.map((result, i) => (
<li
 onClick={() => hanldeTintClick(result.title}}
key={result.id}
>
{result.title}
</li>
)}
</ul>
)}
</>
);
};

debounce is needed to optimize the number of requests to the server. Colback will be called only when the user pauses in entering on 800мс if a lot, then a timeout can be made smaller.
useMemo is useCallback so as not to cause debounce each redraw.

It is clear that in real code instead of ul/li should be styled component. The documentation MateralUI there are examples of the use of their components.
March 23rd 20 at 19:35
https://material-ui.com/components/popover/
When the focus is on input change open to true. Inside Popover'a ship and interact as they wish.

Find more questions by tags Material DesignReactJavaScript