Hide datalist options when user starts typing

Question

I've created a datalist that shows the saved data of the user when he/she closed the program. I wanted the datalist to only show when the user clicks on the dropdown arrow (or the input box) and hides when the user starts typing. I've tried:

1. Creating an oninput event in the hopes that the datalist will hide when user starts typing.
2. Hiding datalist by using datalist.style.display = none;
3. Trying the codes written here: Avoid filtering of datalist items in an input element (Although it does not work in my case because I need to use pure JS)

Help is appreciated, thanks.

Edit: Here is my code:

<div style="top:60px;position:absolute;z-index:2" id="speechBox">
    <input id ="userText" name="userText" type="text" list = 'talk-list' oninput = "hideList()"></input>
    <span class = "dropdown" title = "Saved Talk"><datalist id = 'talk-list'></datalist></span>
    <button id="speakText" class="toolbutton" title="Speak"></button>
  <hr>
</div>

<script>
    function hideList() {
        var hiddenList = document.getElementById("talk-list");
        hiddenList.style.display = none;
    }
</script>

Note: The datalist is not empty. I have an external script that adds infinite amount of options to datalist.

Answer 1

I doubt you can replace how the <datalist> element behaves. If I were you, I'd just make my own datalist made out of divitis. The sample below still has ways to go, but this should get you started in case you want to go this path.

The 3rd solution you mentioned in your post is not really a direct solution to your datalist problem. Instead it suggests a separate library that can render a datalist-like ui element, which turns out to be something from jQuery. What I'm suggesting is exactly like that, except you're gonna write your own.

 function hideList() { const list = document.querySelector("#talk-list"); list.style.display = "none"; } function showList(){ const list = document.querySelector("#talk-list"); list.style.display = "block"; } 

 #talk-list{ border: 1px solid #ccc; display: none; } button{display: block} 

 <div style="top:60px;position:absolute;z-index:2" id="speechBox"> <input id ="userText" name="userText" type="text" list = 'talk-list' oninput = "hideList()" onclick="showList()"></input> <div id = 'talk-list'> <div value="foo">foo</div> <div value="bar">bar</div> </div> <button id="speakText" class="toolbutton" title="Speak">Submit</button> </div> 

Answer 2

One way you can do this is to chage the datalist id when there is a value in input. If there is no value then change the id back so that they can choose the options in the datalist rather than type a new one.

 function hideList(input) { var datalist = document.querySelector("datalist"); if (input.value) { datalist.id = ""; } else { datalist.id = "talk-list"; } } 

 <input id ="userText" name="userText" type="text" list = 'talk-list' oninput="hideList(this)"></input> <span class = "dropdown" title = "Saved Talk"><datalist id = 'talk-list'><option>Apple</option><option>Ball</option><option>Calculator</option><option>Donkey</option></datalist></span> <button id="speakText" class="toolbutton" title="Speak">Speak</button>