Reputation: 2466
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;
}
});
Upvotes: 0
Views: 335
Reputation: 59
You have only included the jQuery UI library and not the core library itself.
You need to include the core library just before <script src="jquery-ui.min.js"></script>
on line 7 on your HTML.
Either include the following:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Or pre-download the jQuery core library and include it in the same way like so:
<script src="jquery.min.js">
Here is your full HTML source file with the included jQuery core library:
<!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="//code.jquery.com/jquery-1.11.3.min.js"></script>
<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>
Upvotes: 0
Reputation: 1404
You've not included jQuery. Add
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
to the head of your page (before jQuery UI).
Upvotes: 1