Hide datalist options when user starts typing
up vote
1
down vote
favorite
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
oninput
event 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
|
show 1 more comment
up vote
1
down vote
favorite
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
oninput
event 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
Can you present any code? Can you not add akeypress
or equivalent event handler to apply thedisplay
? It's all a bit vague...
– Nunchy
Nov 22 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 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 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 at 2:44
1
Just tested it now. @charlietfl is right. Thedatalist
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 at 2:53
|
show 1 more comment
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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
oninput
event 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
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
oninput
event 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
edited Nov 22 at 2:39
asked Nov 22 at 2:26
Andrea G.
84
84
Can you present any code? Can you not add akeypress
or equivalent event handler to apply thedisplay
? It's all a bit vague...
– Nunchy
Nov 22 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 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 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 at 2:44
1
Just tested it now. @charlietfl is right. Thedatalist
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 at 2:53
|
show 1 more comment
Can you present any code? Can you not add akeypress
or equivalent event handler to apply thedisplay
? It's all a bit vague...
– Nunchy
Nov 22 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 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 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 at 2:44
1
Just tested it now. @charlietfl is right. Thedatalist
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 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 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 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 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 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 at 2:41
I've edited my question to show the codes.
– Andrea G.
Nov 22 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 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 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 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 at 2:53
|
show 1 more comment
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
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>
add a comment |
up vote
0
down vote
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>
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 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 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 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 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 at 3:15
|
show 5 more comments
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
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>
add a comment |
up vote
0
down vote
accepted
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>
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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>
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 at 16:06
Mohammad C
1,1301212
1,1301212
add a comment |
add a comment |
up vote
0
down vote
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>
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 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 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 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 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 at 3:15
|
show 5 more comments
up vote
0
down vote
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>
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 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 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 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 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 at 3:15
|
show 5 more comments
up vote
0
down vote
up vote
0
down vote
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>
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>
edited Nov 22 at 3:02
answered Nov 22 at 2:57
Abana Clara
1,368719
1,368719
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 at 3:15
|
show 5 more comments
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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
keypress
or equivalent event handler to apply thedisplay
? It's all a bit vague...– Nunchy
Nov 22 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 at 2:37
I've edited my question to show the codes.
– Andrea G.
Nov 22 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 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– Abana Clara
Nov 22 at 2:53