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:




  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







share|improve this question

























  • 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













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


















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:




  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







share|improve this question

























  • 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













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
















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:




  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







share|improve this 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.






javascript html css




javascript html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 '18 at 2:39







Andrea G.

















asked Nov 22 '18 at 2:26









Andrea G.Andrea G.

134




134













  • 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













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





















  • 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













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



















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














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>








share|improve this answer































    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>








    share|improve this answer


























    • 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











    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


















    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>








    share|improve this answer




























      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>








      share|improve this answer


























        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>








        share|improve this answer













        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 27 '18 at 16:06









        Mohammad CMohammad C

        1,1951312




        1,1951312

























            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>








            share|improve this answer


























            • 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
















            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>








            share|improve this answer


























            • 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














            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>








            share|improve this answer















            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>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 22 '18 at 3:02

























            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



















            • 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


















            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














            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





















































            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







            -

            Popular posts from this blog

            "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

            Image
            .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 2 total noob sorry any help greatly appreciated. I keep getting this "Incorrect syntax near the keyword 'ON'." heres my codes code one CREATE TABLE supplier ( supplierID INT PRIMARY KEY, ISBN INT FOREIGN KEY REFERENCES book(ISBN), price DECIMAL (5,2), ON UPDATE CASCADE, ON DELETE CASCADE, ); code two CREATE TABLE orders ( orderID INT PRIMARY KEY, customerID INT FOREIGN KEY REFERENCES customer(customerID), ISBN INT FOREIGN KEY REFERENCES book(ISBN), orderDate date, ON UPDATE CASCADE, ON DELETE CASCADE, ); Ive run out of stuff to try other than dumbing it down to uselessness. ...
            Read more

            Alcedinidae

            Image
            Alcedinidae Martin-pêcheur à dos bleu ( Alcedo azurea ) Classification (COI) Règne Animalia Embranchement Chordata Sous-embr. Vertebrata Classe Aves Ordre Coraciiformes Famille Alcedinidae Rafinesque, 1815 Les Alcédinidés ou Alcedinidae forment une famille d'oiseaux plus connus sous les noms de martins-pêcheurs et martins-chasseurs. Sommaire 1 Description 2 Répartition et habitat 3 Systématique 3.1 Liste alphabétique des genres 3.2 Liste des espèces 4 Chez les Anciens : l'alcyon 4.1 Étymologie (Littré) 4.2 Oiseau « fabuleux » ? 5 Notes 6 Articles connexes 7 Liens externes 7.1 Bibliographie Description | Ce sont des oiseaux compacts de taille petite à moyenne (10 à 46 cm), au bec droit et long, en forme de poignard. Leurs pattes sont courtes, et ils portent un plumage aux couleurs vives. Répartition et habitat | Cosmopolites, ils fréquentent surtout ...
            Read more

            Origin of the phrase “under your belt”?

            Image
            .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0; } 17 1 Today, I found myself discussing what students should have "under their belts" during a lecture, and I wondered to myself if there was some inappropriate undertone here that I might be unaware of. Question : What is the origin of the phrase "under your belt"? A google search revealed some webpages (e.g. [1]) that assert its origin is related to consumption of food -- once a meal has been eaten, it's under your belt (which is a relief). However, with such websites, I have no way to determine fact from "random guy on the internet making stuff up". etymology idioms ...
            Read more