JSFiddle - React, Tailwind, and code Playground

HTML

<label>Choose your ice cream:
  <input list="flavours" name="choice" type="search" />
</label>

<datalist id="flavours">
  
</datalist>

JavaScript

const flavours = [
  "Banana Cream Pie Ice Cream",
  "Banana Split",
  "Birthday Cake Ice Cream",
  "Blackberry Ice Cream",
  "Bubble Gum Ice Cream",
  "Bunny Tracks",
  "Butter Pecan Ice Cream",
  "Caramel Apple Ice Cream",
  "Carrot Cake Ice Cream",
  "Chocolate Banana Ice Cream"
]

const input = document.querySelector('input[name="choice"]')
const list = document.querySelector('datalist')
input.addEventListener('keyup', () => {
// remove old nodes
list.childNodes.forEach(child => child.remove())

const userInput = input.value;

// make some fetch request to search a database for example, or in this case a simple list
flavours
	.filter(flavour => flavour.search(userInput) !== -1)
  .forEach(flavour => {
  	const option = document.createElement("option");
    option.value = flavour// Create a <li> node
		list.appendChild(option)
  })
})