如何通过单击建议栏上的单词来翻译完成建议？

Question

我只能在此项目中使用HTML，CSS和JavaScript。该应用是翻译器。我做了大部分内容，但是我在翻译建议中选择的单词有问题（我确实在JavaScript上创建了建议），当我独自列出文本时，它会翻译该文本，但是IDK如何通过在建议部分中选择它，将不胜感激。 HTML代码在下面。

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

您可以使用html datalists 元素。

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

编辑：

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