How to translate completion suggestions by clicking the word on suggestion bar?

Question

I can only use HTML, CSS, and Javascript for this project. The app is a translator. I did most of it, but I have a problem with translating the word which I select in the suggestions (I did create suggestion thing on javascript), it translates the text when I put it on my own, but idk how to do it by selecting it on the suggestion part, any help would be appreciated. HTML code is below.

function checkfortranslate(){
    var input = document.getElementById("input").value;
    var output = document.getElementById("output");
    input = input.toLowerCase();

    if(input=="able"){
        output.innerHTML = "привет";
    }
    else if(input=="about"){
        output.innerHTML = "привет";
    }
    else if(input=="allow"){
        output.innerHTML = "привет";
    }
    else if(input=="above"){
        output.innerHTML = "благодарю вас";
    }
    else if(input=="abroad"){
        output.innerHTML = "привет";
    }
    else if(input=="accident"){
        output.innerHTML = "привет";
    }
}

<h2>SIMPLE ENGLISH TRANSLATOR</h2>
<form autocomplete="off">
  <div>
    <input id="input" type="text" placeholder="Write text to translate" onkeyup="checkfortranslate()">
    <ul class="list"></ul>
    <div id="output" style="display: inline;">[Translation]</div>
  </div>
</form>

Answer 1

You can use html datalist element.

<datalist id="input" type="text" placeholder="Write text to translate" onkeyup="checkfortranslate()">
     <option value="able">
     ...
     <option value="accident">
    </datalist>

Edit:

<input id="input" type="text" placeholder="Write text to translate" onkeyup="checkfortranslate()" list="list">
 <datalist id="list">
     <option value="able">
     ...
     <option value="accident">
    </datalist>