JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<input typ="text" id="scl_name" />

JavaScript

$(window).load(function() {
  /* 
   * jQuery UI Multicolumn Autocomplete Widget Plugin 2.2 
   * Copyright (c) 2012-2015 Mark Harmon 
   * 
   * Depends: 
   * - jQuery UI Autocomplete widget 
   * 
   * Dual licensed under the MIT and GPL licenses: 
   * opensource.org/licenses/… 
   * gnu.org/licenses/gpl.html 
   */
  $.widget('custom.mcautocomplete', $.ui.autocomplete, {
    options: {},
    _create: function(options) {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-widget-header)");
    },
    _renderMenu: function(ul, items) {
      var self = this,
        thead;

      if (this.options.showHeader) {
        table = $('<div class="ui-widget-header" style="width:100%"></div>');
        console.log(table);
        // Column headers 
        var columns = [{
          name: "schoolname_heading",
          minWidth: 100
        }, {
          name: "description",
          minWidth: 100
        }];
        console.log(columns);
        $.each(columns, function(index, item) {
          table.append('<span style="float:left;min-width:' + item.minWidth + ';">' + item.name + '</span>');
        });

        table.append('<div style="clear: both;"></div>');
        ul.append(table);
        console.log("check this table", table);
      }
      // List items 
      //console.log(item);
      $.each(items, function(index, item) {
        self._renderItem(ul, item);
      });
    },

    _renderItem: function(ul, item) {
      var t = '',
        result = '';
      var columns = [{
        name: "schoolname_heading",
        minWidth: 100
      }, {
        name: "description",
        minWidth: 100
      }];
      $.each(columns, function(index, column) {
        console.log(column); // see what column is and use the correct field name for below 
        t += '<span style="float:left;min-width:' + 100 + ';">' + column.name + '</span>'
      });

      result = $('<li></li>')
        .data('ui-autocomplete-item', item)
       ...