JSFiddle - React, Tailwind, and code Playground

by Jonathan Layton

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Start typing "Control" or "Something" in the product name box. Then click the resulting drop-down text to autofill the rest of the fields.</p>	
  <table id="estimate" class="dispaly table table-striped">
	    <thead>
	       <tr>
	            <th class="col-md-2">Name</th>
	            <th class="col-md-4">Description</th>
	            <th class="col-md-2">SKU</th>
	            <th class="col-md-2">Cost</th>
	            <th class="col-md-2">Price</th>
	       </tr>
	    </thead>
	    <tbody id="estimate_row">
	       <tr>
	            <td><input type="text" name="product-search" id="product-search" class="form-control typeahead" placeholder="Product Name" /></td>
	            <td><input type="text" name="description" id="description" class="form-control typeahead" placeholder="Description" /></td>
	            <td><input type="text" name="sku" id="sku" class="form-control typeahead" placeholder="SKU" /></td>
	            <td><div class="input-group"><span class="input-group-addon">$</span><input type="text" name="cost" id="cost" class="form-control typeahead" placeholder="Cost" /></div></td>
	            <td><div class="input-group"><span class="input-group-addon">$</span><input type="text" name="price" id="price" class="form-control typeahead" placeholder="Price" /></div></td>
	        </tr>
	    </tbody>
	</table>

JavaScript

var objArray = [
    {
        "Name": "Control 4  C4-EA1",
        "Description": "Control4 EA-1 Entertainment and Automation Controller",
        "SKU": "C4-EA1",
        "Cost": "123.00",
        "Price": "456.00"
    },
    {
        "Name": "Something else",
        "Description": "Something more",
        "SKU": "AB-CD1",
        "Cost": "789.00",
        "Price": "101.00"
    }
];
var nameArray = [];
var descArray = [];
var skuArray = [];
var costArray = [];
var priceArray = [];

$( document ).ready(function() {
    "use strict";
    
    buildArrays();
    
    var searchRequest = null;
    $("#product-search").autocomplete({
        minLength: 3,
        source: nameArray,
        select: function( event, ui ) {
        	console.log(ui.item['value']);
        	var val = ui.item['value'];
        	fillOtherValues(val);
        }
    });
});

function buildArrays() {

	$(objArray).each(function(key) {
	  	
	  	for ( i=1; i<objArray.length; i++ ) {
	  		nameArray.push(this.Name);
	  		descArray.push(this.Description);
	  		skuArray.push(this.SKU);
	  		costArray.push(this.Cost);
	  		priceArray.push(this.Price);
	  	}
  	});
}

function fillOtherValues(val) {
	var index = $.inArray( val, nameArray );
	$('input#description').val(descArray[index]);
	$('input#sku').val(skuArray[index]);
	$('input#cost').val(costArray[index]);
	$('input#price').val(priceArray[index]);
}