JSFiddle - React, Tailwind, and code Playground

by gmdavis62

HTML

<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="add">Add: </label>
  <input id="add">
</div>
 
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Devices:
  <div id="devices" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

CSS

#devices{border:1px solid #ccc;}

JavaScript

var source = ["andrew7x86sp1", "qapoojawin7x64", "mizzen", "robrhel55x64", "devcentos62x64", "MBP-C02J8424DKQ5", "win7x64-2", "krashreporter", "Windows8-64-new", "roey-win7x64", "roeyxpx64", "qak1w7x64-03", "qapoojawin2k12rc", "qaet", "roey-winxp", "starscream", "zwin7-4", "win7x64-K2-sanity", "qaw7mdri1_20_28", "anushat1win7sp1", "qak1abhaymac107", "yunw7x64cn", "laser", "megatron", "trey-W2K12_R2", "ubuntu", "trey-Win7", "WIN-38A0J422DQC", "qaw2012core1", "dell-078aea6e41", "admin’s Mac", "mess", "MitchMBP", "a1s3ubs13x64", "qaxpmdri1", "qaw7x86-01", "qamlion1", "dsqa2-1018", "dsqa2-1024", "dsqa2-1016", "dsqa2-1026", "dsqa2-1021", "dsqa2-1027", "dsqa2-1012", "dsqa2-1028", "dsqa2-1015", "dsqa2-1022", "xp01", "qak1rhel39x86", "qarhel54x86-01.test.kace.com", "batman", "qak1davevista", "tylerxp-02", "tylerxp-01", "dsqa2-1020", "dsqa2-1029", "MitchWin7x64", "WN7X64-38HG1Q1", "dsqa2-1017", "Bobs-MacBook-Pro", "linux-9vsf", "Slob", "qapooja105", "roeyvx86", "Cyclops", "dsqa2-1019", "dsqa2-1014", "dsqa2-1011", "dsqa2-1013", "dsqa2-1025", "qapoojawin7", "dsqa2-1030", "pmxp1"];

$(function() {
    function log( message ) {
      $( "<div>" ).text( message ).appendTo( "#log" );
      $( "#devices" ).scrollTop( 0 );
    }
 
    $( "#add" ).autocomplete({
      source: source,
      minLength: 0,
     
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value :
          "Nothing selected, input was " + this.value );
      }
      
    });
  });