React 및 CSS를 사용한 간단한 입력 자동 완성

데모

const [value, setValue] = React.useState("");
const [show, setShow] = React.useState(false);

  const ItemList = (() => {
    if (!show) return [];
    return list
      .filter((v) => v.toLowerCase().includes(value.toLowerCase()))
      .map((v) => (
        <button
          onClick={() => {
            setValue(() => v);
            setShow(false);
          }}
          key={v}
        >
          {v}
        </button>
      ));
  })();

.container > div input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.container > div input:focus {
  outline: 1px solid rgb(83, 172, 255);
}

<input
     onFocus={() => setShow(true)}
     onBlur={() =>
       setTimeout(() => {
         setShow(false);
          }, 150)
       }
     value={value}
     onChange={onInputChange}>
</input>

.list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  width: inherit;
  overflow: auto;
  overflow-x: hidden;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.list button {
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  max-height: 3em;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

.list button:hover {
  background: #f8f8f8;
}

.list button:last-child {
  border-bottom: none;
}