Making HTML5 datalist visible when focus event fires on input

Question

As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve the same purpose s

Answer 1

HTML:

jQuery:

var result='';
$(document).ready(function(){  
   $('input[type=text]').focus(function(){
      $('#categories option').each(function(){
      result=result+" "+$(this).val();
      });

      $('#result').show().html(result);
      $('input[type=text]').unbind('focus');
   });
   $('input[type=text]').blur(function(){
       $('#result').hide();  
       $('input[type=text]').focus(function(){
           $('#result').show();
       });

   });  
});

Working JS bin

http://jsbin.com/urupit/4/watch