JSFiddle - React, Tailwind, and code Playground

HTML

<form id="theform">
  <input type="text" id="inputelement" autocomplete="off" />
  <input type="submit" value="Go!" />
</form>

JavaScript

var arr = [1,2,3,5,6,7,10,11,12];

var datalist = document.createElement('datalist');
arr.forEach(function(num) {
  var option = document.createElement('option');
  option.value = num;
  datalist.appendChild(option);
});
datalist.id = "numberlist";
document.body.appendChild(datalist);

// apply to input
document.getElementById('inputelement').setAttribute("list","numberlist");

// some validation required to make selecting from the list a requirement
document.getElementById('inputelement').onchange = function() {
	if( arr.indexOf(parseInt(this.value,10)) < 0) this.setCustomValidity("Please choose a number from the list.");
  else this.setCustomValidity("");
};

document.getElementById('theform').onsubmit = function(e) {
	e.preventDefault();
  alert("Submitted!");
  return false;
};