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.

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.

• javascript
• html
• css

• 1 Can you present any code? Can you not add a keypress or equivalent event handler to apply the display? It's all a bit vague... – Nunchy Commented Nov 22, 2018 at 2:30
• Please show us what you have tried. If possible, the relevant portion of your code (html/js) running on a snippet. Right now, all we can do is guesswork – Potato Salad Commented Nov 22, 2018 at 2:37
• I've edited my question to show the codes. – Andrea G. Commented Nov 22, 2018 at 2:41
• 1 What is the point of having a datalist at all if you want to hide it when user types? That is when it shows by default. When would you expect it to show? – charlietfl Commented Nov 22, 2018 at 2:44
• 1 Just tested it now. @charlietfl is right. The datalist element natively behaves to show options as the user types, filtering those that are relevant to the current input. What's the point of a datalist if you want to hide it then. I doubt you can override this behavior. Better yet just use an improvised datalist using a div and manipulate it as you like – Potato Salad Commented Nov 22, 2018 at 2:53

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

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>