JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<input type="text" id="Resource" />
<input type="text" id="EmployeeNumber" />

JavaScript

var resources = [{ label:'Bob', value:'0'}, { label:'John', value:'1'}, { label:'Dave', value:'2'}];

jQuery(function(){
    jQuery('#Resource').autocomplete({
        source: function( request, response ) {
            var matcher = new RegExp($.trim(request.term).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i" );
            var matches = $.grep(resources, function(value) {
                return matcher.test( value.label || value.value || value );
            });
            response(matches.length ? matches : [{ label: 'No Result Found', value: '' }]);
        },
        focus: function(event, ui) {
            jQuery('#Resource').val(ui.item.label);
            return false;
        },          
        select: function(event, ui) {
            jQuery('#Resource').val(ui.item.label);
            jQuery('#EmployeeNumber').val(ui.item.value);
            return false;
        }
    });
});