Javascript-added datalist and text input not showing options

Question

I was trying to make a search bar for a navigation menu with data lists, and I used JavaScript to do it automatically on every page. However, it is not working, how do I solve this?

Definition of the text input

let searchBar = document.createElement("input");
searchBar.type = "text";
searchBar.list = "search-results";
searchBar.id = "search-bar";
searchBar.name = "search-bar";

The datalist

let searchResults = document.createElement("datalist");
searchResults.id = "search-results";

And the options

const searchPagesDisplayNames = ["Home","Numbers","WIPs","Interpreters","Noise","What's the difference?","Star Calculator", "Tsevhu","Bee Swarm Ideas"];
const searchLinks = []; //Censored (not a mistake)
for (let i = 0; i < searchPagesDisplayNames.length; i++) {
  let option = document.createElement("option");
  option.value = searchPagesDisplayNames[i];
  searchResults.appendChild(option);
}

The search bar and the data list are being added to the same parent element later on. I've looked through the code and found nothing wrong. Please help