JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<link rel="stylesheet" href="code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th><div class="text-center" style="min-width:32px">Sl.<br>No.</div></th>
      <th><div class="text-left" style="min-width:200px">Product</div></th>
      <th><div class="text-left" style="min-width:70px">Packing</div></th>
      <th><div class="text-left" style="min-width:80px">Batch</div></th>
      <th><div class="text-right" style="min-width:85px">Exp. Date</div></th>
      <th><div class="text-right" style="min-width:45px">Qty</div></th>
      <th><div class="text-right" style="min-width:100px">Total</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span>1</span>
      </td>
      <td>
        <input type="text" class="mcAutoCombo sales product" id="prod_r1">
      </td>
      <td>
        <input type="text" class="pack" id="pack_r1" readonly>
      </td>
      <td>
        <input type="text" class="batch" disabled id="batch_r1">
      </td>
      <td>
        <input type="text" class="expiry" id="exp_r1" disabled>
      </td>
      <td>
        <input type="number" min="1" class="qty" id="qty_r1" data-focus="free_r1" placeholder="1">
      </td>
      <td>
        <input type="number" min="0" class="free" id="free_r1" data-focus="rate_r1" placeholder="0">
      </td>
      <td>
        <input type="text" class="rate" id="rate_r1">
      </td>
      <td>
        <input type="text" class="disc" id="disc_r1" readonly>
      </td>
      <td>
        <input type="text" class="tax" id="tax_r1" readonly>
      </td>
      <td>
        <input type="text" class="ptr" id="ptr_r1" readonly>
      </td>
      <td>
        <input type="text" class="mrp" id="mrp_r1" readonly>
      </td>
      <td>
        <input type="text" class="val" id="val_r1" readonly>
      </td>
    </tr>
  </tbody>
</table>

CSS

.ui-autocomplete {
    max-height: 200px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    font-size:14px;
}

JavaScript

/*
 * jQuery UI Multicolumn Autocomplete Widget Plugin 2.2
 *
 * Depends:
 *   - jQuery UI Autocomplete widget
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
*/
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _create: function() {
	  "use strict";
      this._super();
      this.widget().menu( "option", "items", "> :not(.ui-widget-header)" );
    },
    _renderMenu: function(ul, items) {
        "use strict";
		var self = this, thead;
		
        if (this.options.showHeader) {
            var table=$('<div class="ui-widget-header" style="width:100%"></div>');
            // Column headers
            $.each(this.options.columns, function(index, item) {
                table.append('<span style="float:left;width:' + item.width + ';">' + item.name + '</span>');
            });
			table.append('<div style="clear: both;"></div>');
            ul.append(table);
        }
		
		/*ul.css('width',ul.innerWidth() + 300 +'px !important');*/
		
        // List items
        $.each(items, function(index, item) {
            self._renderItem(ul, item);
        });
    },
    _renderItem: function(ul, item) {
		"use strict";
		var t = '',
			result = '';
		
		$.each(this.options.columns, function(index, column) {
			t += '<span style="float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>';
		});
	
		result = $('<li></li>')
			.data('ui-autocomplete-item', item)
			.append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>')
			.appendTo(ul);
		
		return result;
    }
});

var product=[
	{
		"id": 0,
		"label": "Product Abcd",
		"batch":"A026052015",
		"unit":"5X5X5",
		"value": "Product Abcd",
		"color": "#0F0",
		"exp":"21/09/2016",
		"price": 725.98,
		"stkqty":320,
		"stkMin":300
	},
	{
		"id": 1,
		"label": "Zxcv Abc",
		"batch":"Zx-1777",
		"unit":"10X10",
		"value": "Zxcv Abc",
		"color":...