Hide datalist options when user starts typing
1
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:
- Creating an
oninputevent in the hopes that the datalist will hide when user starts typing. - Hiding datalist by using
datalist.style.display = none;
- 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
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
|
show 1 more comment
1
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:
- Creating an
oninputevent in the hopes that the datalist will hide when user starts typing. - Hiding datalist by using
datalist.style.display = none;
- 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
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
Can you present any code? Can you not add akeypressor equivalent event handler to apply thedisplay? It's all a bit vague...
– Nunchy
Nov 22 '18 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
– Abana Clara
Nov 22 '18 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 '18 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
Nov 22 '18 at 2:44
1
Just tested it now. @charlietfl is right. Thedatalistelement 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
– Abana Clara
Nov 22 '18 at 2:53
|
show 1 more comment
1
1
1
1
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:
- Creating an
oninputevent in the hopes that the datalist will hide when user starts typing. - Hiding datalist by using
datalist.style.display = none;
- 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
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
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:
- Creating an
oninputevent in the hopes that the datalist will hide when user starts typing. - Hiding datalist by using
datalist.style.display = none;
- 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
javascript html css
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
edited Nov 22 '18 at 2:39
Andrea G.
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
asked Nov 22 '18 at 2:26
Andrea G.Andrea G.
134
134
Can you present any code? Can you not add akeypressor equivalent event handler to apply thedisplay? It's all a bit vague...
– Nunchy
Nov 22 '18 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
– Abana Clara
Nov 22 '18 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 '18 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
Nov 22 '18 at 2:44
1
Just tested it now. @charlietfl is right. Thedatalistelement 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
– Abana Clara
Nov 22 '18 at 2:53
|
show 1 more comment
Can you present any code? Can you not add akeypressor equivalent event handler to apply thedisplay? It's all a bit vague...
– Nunchy
Nov 22 '18 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
– Abana Clara
Nov 22 '18 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 '18 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
Nov 22 '18 at 2:44
1
Just tested it now. @charlietfl is right. Thedatalistelement 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
– Abana Clara
Nov 22 '18 at 2:53
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
Nov 22 '18 at 2:30
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
Nov 22 '18 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
– Abana Clara
Nov 22 '18 at 2:37
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
– Abana Clara
Nov 22 '18 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 '18 at 2:41
I've edited my question to show the codes.
– Andrea G.
Nov 22 '18 at 2:41
1
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
Nov 22 '18 at 2:44
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
Nov 22 '18 at 2:44
1
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– Abana Clara
Nov 22 '18 at 2:53
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– Abana Clara
Nov 22 '18 at 2:53
|
show 1 more comment
2 Answers
2
active
oldest
votes
0
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>answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
add a comment |
0
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>answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
Not condemning you for a UI that acts as OP wants. Whole concept though seems so backwards , counter intuitive and not very user friendly
– charlietfl
Nov 22 '18 at 3:04
@charlietfl Literally why it has a long ways to go. You don't expect this to be just this?
– Abana Clara
Nov 22 '18 at 3:05
Understood. i'm the one that asked what the whole point of datalist is in comments above. And as I said you are doing what OP was asking for...it's what they are asking for that doesn't make sense and is counter intuitive
– charlietfl
Nov 22 '18 at 3:07
@AndreaG. but why hide it? As user types they don't have to type every letter as clickable options get filtered which is how users are accustomed to seeing such autocomplete interfaces
– charlietfl
Nov 22 '18 at 3:11
@charlietfl I know, but I wanted to disable the filtering effect of datalist. But I have to do it using JS only. Is it possible, or do I have to use another combo box tags?
– Andrea G.
Nov 22 '18 at 3:15
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423058%2fhide-datalist-options-when-user-starts-typing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
add a comment |
0
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>answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
add a comment |
0
0
0
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>answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
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>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>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>answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
answered Nov 27 '18 at 16:06
Mohammad CMohammad C
1,1951312
1,1951312
add a comment |
add a comment |
0
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>answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
Not condemning you for a UI that acts as OP wants. Whole concept though seems so backwards , counter intuitive and not very user friendly
– charlietfl
Nov 22 '18 at 3:04
@charlietfl Literally why it has a long ways to go. You don't expect this to be just this?
– Abana Clara
Nov 22 '18 at 3:05
Understood. i'm the one that asked what the whole point of datalist is in comments above. And as I said you are doing what OP was asking for...it's what they are asking for that doesn't make sense and is counter intuitive
– charlietfl
Nov 22 '18 at 3:07
@AndreaG. but why hide it? As user types they don't have to type every letter as clickable options get filtered which is how users are accustomed to seeing such autocomplete interfaces
– charlietfl
Nov 22 '18 at 3:11
@charlietfl I know, but I wanted to disable the filtering effect of datalist. But I have to do it using JS only. Is it possible, or do I have to use another combo box tags?
– Andrea G.
Nov 22 '18 at 3:15
|
show 5 more comments
0
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>answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
Not condemning you for a UI that acts as OP wants. Whole concept though seems so backwards , counter intuitive and not very user friendly
– charlietfl
Nov 22 '18 at 3:04
@charlietfl Literally why it has a long ways to go. You don't expect this to be just this?
– Abana Clara
Nov 22 '18 at 3:05
Understood. i'm the one that asked what the whole point of datalist is in comments above. And as I said you are doing what OP was asking for...it's what they are asking for that doesn't make sense and is counter intuitive
– charlietfl
Nov 22 '18 at 3:07
@AndreaG. but why hide it? As user types they don't have to type every letter as clickable options get filtered which is how users are accustomed to seeing such autocomplete interfaces
– charlietfl
Nov 22 '18 at 3:11
@charlietfl I know, but I wanted to disable the filtering effect of datalist. But I have to do it using JS only. Is it possible, or do I have to use another combo box tags?
– Andrea G.
Nov 22 '18 at 3:15
|
show 5 more comments
0
0
0
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>answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
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>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>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>answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
edited Nov 22 '18 at 3:02
answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
answered Nov 22 '18 at 2:57
Abana ClaraAbana Clara
1,646919
1,646919
Not condemning you for a UI that acts as OP wants. Whole concept though seems so backwards , counter intuitive and not very user friendly
– charlietfl
Nov 22 '18 at 3:04
@charlietfl Literally why it has a long ways to go. You don't expect this to be just this?
– Abana Clara
Nov 22 '18 at 3:05
Understood. i'm the one that asked what the whole point of datalist is in comments above. And as I said you are doing what OP was asking for...it's what they are asking for that doesn't make sense and is counter intuitive
– charlietfl
Nov 22 '18 at 3:07
@AndreaG. but why hide it? As user types they don't have to type every letter as clickable options get filtered which is how users are accustomed to seeing such autocomplete interfaces
– charlietfl
Nov 22 '18 at 3:11
@charlietfl I know, but I wanted to disable the filtering effect of datalist. But I have to do it using JS only. Is it possible, or do I have to use another combo box tags?
– Andrea G.
Nov 22 '18 at 3:15
|
show 5 more comments
Not condemning you for a UI that acts as OP wants. Whole concept though seems so backwards , counter intuitive and not very user friendly
– charlietfl
Nov 22 '18 at 3:04
@charlietfl Literally why it has a long ways to go. You don't expect this to be just this?
– Abana Clara
Nov 22 '18 at 3:05
Understood. i'm the one that asked what the whole point of datalist is in comments above. And as I said you are doing what OP was asking for...it's what they are asking for that doesn't make sense and is counter intuitive
– charlietfl
Nov 22 '18 at 3:07
@AndreaG. but why hide it? As user types they don't have to type every letter as clickable options get filtered which is how users are accustomed to seeing such autocomplete interfaces
– charlietfl
Nov 22 '18 at 3:11
@charlietfl I know, but I wanted to disable the filtering effect of datalist. But I have to do it using JS only. Is it possible, or do I have to use another combo box tags?
– Andrea G.
Nov 22 '18 at 3:15
Not condemning you for a UI that acts as OP wants. Whole concept though seems so backwards , counter intuitive and not very user friendly
– charlietfl
Nov 22 '18 at 3:04
Not condemning you for a UI that acts as OP wants. Whole concept though seems so backwards , counter intuitive and not very user friendly
– charlietfl
Nov 22 '18 at 3:04
@charlietfl Literally why it has a long ways to go. You don't expect this to be just this?
– Abana Clara
Nov 22 '18 at 3:05
@charlietfl Literally why it has a long ways to go. You don't expect this to be just this?
– Abana Clara
Nov 22 '18 at 3:05
Understood. i'm the one that asked what the whole point of datalist is in comments above. And as I said you are doing what OP was asking for...it's what they are asking for that doesn't make sense and is counter intuitive
– charlietfl
Nov 22 '18 at 3:07
Understood. i'm the one that asked what the whole point of datalist is in comments above. And as I said you are doing what OP was asking for...it's what they are asking for that doesn't make sense and is counter intuitive
– charlietfl
Nov 22 '18 at 3:07
@AndreaG. but why hide it? As user types they don't have to type every letter as clickable options get filtered which is how users are accustomed to seeing such autocomplete interfaces
– charlietfl
Nov 22 '18 at 3:11
@AndreaG. but why hide it? As user types they don't have to type every letter as clickable options get filtered which is how users are accustomed to seeing such autocomplete interfaces
– charlietfl
Nov 22 '18 at 3:11
@charlietfl I know, but I wanted to disable the filtering effect of datalist. But I have to do it using JS only. Is it possible, or do I have to use another combo box tags?
– Andrea G.
Nov 22 '18 at 3:15
@charlietfl I know, but I wanted to disable the filtering effect of datalist. But I have to do it using JS only. Is it possible, or do I have to use another combo box tags?
– Andrea G.
Nov 22 '18 at 3:15
|
show 5 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423058%2fhide-datalist-options-when-user-starts-typing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you present any code? Can you not add a
keypressor equivalent event handler to apply thedisplay? It's all a bit vague...– Nunchy
Nov 22 '18 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
– Abana Clara
Nov 22 '18 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 '18 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
Nov 22 '18 at 2:44
1
Just tested it now. @charlietfl is right. The
datalistelement 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– Abana Clara
Nov 22 '18 at 2:53