How can I make a browser display all datalist options when a default value is set?

前端未结

关注

 5  1693

爱一瞬间的悲伤 2020-12-15 17:01

I have an HTML form with a datalist and where the value is set with PHP, like

\">


      
      
        
          5条回答        

        
                    
            
            
                         
                
              
              
                
                   [愿得一人]
                                             
                
                
                (楼主)
            
              
              
                2020-12-15 17:42
              

            
            
                        
 uses autocomplete functionality so this is normal behaviour.

For example if you set input value to be 'o' you will see just orange in datalist options. It checks word from first letter. But if you set input value to 'a' then you won't see options at all.

So if you already have value in input then nothing will be shown in datalist options except that value if it exists. It doesn't behave like select.

Workaround for this would be to use jquery like this for example:

$('input').on('click', function() {
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val('apple');
  }
});


Full test here: https://jsfiddle.net/yw5wh4da/

Or you could use 
                        
    

    提交评论