CODEWITHSUNDEEP
javascriptjqueryjquery-ui
112233
112233

Reputation: 2466

Autocomplete not functioning as per fiddle

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

Answers (2)

James Cordeiro
James Cordeiro

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

JBux
JBux

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

Related Questions