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>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>