I just wanted to do exactly like this fiddle: <http://fiddle.jshell.net/dryydaxq/show/light/>

However I'm getting the error saying that:

> 
> Uncaught ReferenceError: jQuery is not defined(anonymous function) @
>  jquery-ui.min.js:6(anonymous function) @ jquery-ui.min.js:6
>  multi-auto.js:13   
>   
> Uncaught ReferenceError: $ is not defined  
> 
> 
> 
> 

I did refer to this to some discussions on this topic and ensured that jquery library included before the plugin. Then the library is shown included in the Chrome dev tool under sources.

Can anyone spot the mistake I did please?  

HTML

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script src="jquery-ui.min.js"></script>
<script src="multi-auto.js"></script>

</head>

<body>
<div style="margin:10px 10px;padding:8px;width:90%;" class="ui-widget ui-widget-content ui-corner-all">
    <div style="margin:0 0 6px 2px;">Type in a color</div>

    <!-- This input control gets turned into the jquery ui widget -->
    <input id="search" type="text" style="padding:4px;font-size:.8em;width:95%;"/>
</div>

<div id="outputDiv" style="margin:10px">Select a color and the value will display here</div>

</body>
</html>

```

jQuery

```
/*
 * 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:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
*/
$.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>');
            // Column headers
            $.each(this.options.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);
        }
        // List items
        $.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="float:left;min-width:' + column.minWidth + ';">' + 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 columns = [{
    name: 'Color',
    minWidth: '100px'},
{
    name: 'Hex',
    minWidth: '70px'}],
    colors = [['White', '#fff'], ['Black', '#000'], ['Red', '#f00'], ['Green', '#0f0'], ['Blue', '#00f']];

$("#search").mcautocomplete({
    showHeader: true,
    columns: columns,
    source: colors,
    select: function(event, ui) {
        // Set the input box's value
        this.value = (ui.item ? ui.item[0] : '');
        // Set the output div's value
        $('#outputDiv') && $('#outputDiv').text(ui.item ? ('You have selected ' + ui.item[1]) : 'Select a color');
        return false;
    }
});

```