Show input suggestions INSIDE input box-CodePudding

I want to show suggestions like this inside of <input>:

I am using React & Material-UI. I've tried using absolute positioning, but that leads to pixel-impefect calculations of offset. How else can I achieve this? Is there a way I can force placeholder to remain even when input is non-empty?

CodePudding user response：

You can create an input with span absolutely positioned:

<div >
  <input  type="text">
  <span ></span>
</div>

Example: https://jsfiddle.net/kah8130m/1/

CodePudding user response：

In Reactjs you can use "downshift" library to create an autocomplete input box. The library provides a set of hooks and components for building simple, flexible, WAI-ARIA compliant input enhancements.