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">MRP</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="text" class="rate" id="rate_r1">
      </td>
      <td>
        <input type="text" class="val" id="val_r1" readonly>
      </td>
    </tr>
  </tbody>
</table>

CSS

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

input[type="text"],
input[type="number"]{
  width:100%;
}

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": "#F00",
  "exp": "21/09/2016",
  "price": 274.29,
...