JSFiddle - React, Tailwind, and code Playground

HTML

<input id="searchbar" onkeyup="fsearch()" type="text">
<br />
<span class="choice">A</span>
<span class="choice">B</span>
<br />
<button onclick="word_insertion(this)" data-product-name="A">Insert A</button>

JavaScript

function word_insertion(element){
document.getElementById('searchbar').value = element.getAttribute('data-product-name');}  

function fsearch() { 
let input = document.getElementById('searchbar').value 
input=input.toLowerCase(); 
let x = document.getElementsByClassName('choice');       
for (i = 0; i < x.length; i++) {  
if (!x[i].innerHTML.toLowerCase().includes(input)) { x[i].style.display="none"; }
else { x[i].style.display="list-item";                  
}}}