JSFiddle - React, Tailwind, and code Playground

by antelopelovefan

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<div class="selected"></div>
<div class="ui-widget">
  <label for="skus">SKUs: </label>
  <input id="skus" />
</div>

JavaScript

var skus = ['TVD-N210V-2-N', 'TVD-N210V-2-P', 'TVD-N245V-2-N', 'TVD-N245V-2-P', 'TVD-M1210V-2-N', 'TVD-M1210V-2-P', 'TVD-M1225V-2-N', 'TVD-M1225V-2-P', 'TVD-M2210V-2-N', 'TVD-M2210V-2-P', 'TVD-M2225V-2-N', 'TVD-M2225V-2-P', 'TVD-M3210V-2-N', 'TVD-M3210V-2-P', 'TVD-M3225V-2-N', 'TVD-M3225V-2-P', 'TVD-M5225V-4-N', 'TVD-M5225V-4-P', 'TVD-N210W-4-N', 'TVD-N210W-4-P', 'TVD-M2210W-4-N', 'TVD-M2210W-4-P', 'TVC-N220-1-N', 'TVC-N220-1-P', 'TVC-N240-1-N', 'TVC-N240-1-P', 'TVC-M1220-1-N', 'TVC-M1220-1-P', 'TVC-M2220-1-N', 'TVC-M2220-1-P', 'TVC-M3220-1-N', 'TVC-M3220-1-P', 'TVC-M5220-1-N', 'TVC-M5220-1-P', 'TVD-N225E-2M-N', 'TVD-N225E-2M-P', 'TVD-M1245E-2M-N', 'TVD-M1245E-2M-P', 'TVC-N225E-2M-N', 'TVC-N225E-2M-P', 'TVC-M1245E-2M-N', 'TVC-M1245E-2M-P', 'TVD-M1210W-2-N', 'TVD-M1210W-2-P', 'TVD-M1210W-2W-N', 'TVD-M1210W-2W-P', 'UVP-N120P-36X-N', 'UVP-N120P-36X-P', 'UVP-N120S-36X-N', 'UVP-N120S-36X-P', 'UVP-N120F-36X-N', 'UVP-N120F-36X-P', 'TVE-400', 'TVE-800', 'TVE-1600'];

$("#skus").autocomplete({
    source: skus,
    select: function( event, ui ) {
        console.log(ui.item);
        $('.selected').html(ui.item.value);
    }
});