JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
  <input typ="text" id="scl_name" />

JavaScript

$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _create: function () {
        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>');
            $.each(this.options.columns, function (index, item) {
                table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
            });
            table.append('<div style="clear: both;"></div>');
            ul.append(table);
        }
        $.each(items, function (index, item) {
            self._renderItem(ul, item);
        });
    },
    _renderItem: function (ul, item) {
        var t = '',
            result = '';
        $.each(this.options.columns, function (index, column) {
            t += '<span style="padding:0 4px;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;
    }
});


// Sets up the multicolumn autocomplete widget.
$("document").ready(function (){
	$("#scl_name").mcautocomplete({
		// These next two options are what this plugin adds to the autocomplete widget.
	       showHeader: true,
			columns: [{
				name: 'description',
				width: '150px'
			}, {
				name: 'schoolname',
				width: '120px'
			}],

		// Event handler for when a list item is selected.
		/*select: function (event, ui) {
			this.value = (ui.item ? ui.item.name : '');
			$('#school_Name').text(ui.item ? 'Selected: ' + ui.item.name +this.value);
			return false;
		},*/

		// The rest of the options are for configuring the ajax...