JSFiddle - React, Tailwind, and code Playground

by sesamechicken

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- just for testing IGNORE -->
<div class="push"></div>
<!-- just for testing IGNORE -->


<input type="text" list="browsers" value="Netscape">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<script>
  
    function makeDataList(){
        var options = [''];
        var $datalist = $('input[list]');
          
        // Get options
        $('datalist option').each(function(indx, val){
          options.push(val.value);
        });

        var $input = $(document.createElement('input'));
        $input.addClass('data-list-txt form-control');
        var $list = $(document.createElement('select'));
        $list.addClass('data-list form-control');
        $list.change(function(){
          $input.val($(this).val());
          $(this)[0].selectedIndex = 0;
        });
          
        // Populate the list of options
        $.each(options, function (i, item) {
            $list.append($('<option>', { 
                value: item,
                text : item 
            }));
        });
          
        $datalist.hide();
        $input.insertAfter($datalist);
        $list.insertAfter($input);
    }
    
    
    (function(){
        makeDataList();
    }());
</script>

CSS

.data-list-txt {
    min-width: 90%;
}
.data-list {
    margin-top: -34px;
    cursor: pointer;
}
/* testing IGNORE*/
 .push {
    margin-top: 40px;
}