_render function not working in autocomplete

[webitdev2015]

Hi

I was going your tutorial on integrating jQuery UI's autocomplete with Rails using the link below:

http://www.lugolabs.com/articles/20-jquery-ui-autocomplete-with-ruby-on-rails

For some reason I am getting this error:

Uncaught TypeError: Cannot set property '_renderItem' of undefined
    at app.PopularSchools._initAutocomplete (inner_layout.self-7e73ad8….js?body=1:231)
    at app.PopularSchools (inner_layout.self-7e73ad8….js?body=1:220)
    at HTMLDocument.<anonymous> (inner_layout.self-7e73ad8….js?body=1:213)
    at fire (jquery.self-bd7ddd3….js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd3….js?body=1:3363)
    at Function.ready (jquery.self-bd7ddd3….js?body=1:3583)
    at HTMLDocument.completed (jquery.self-bd7ddd3….js?body=1:3618)

My application.js file:

//= require inner_layout/jQuery-2.1.4.min
//= require rails-jquery-tokeninput
//= require inner_layout/bootstrap.min
//= require jquery_ujs
//= require inner_layout/jquery.mCustomScrollbar.concat.min
//= require inner_layout/app.min
//= require inner_layout/owl.carousel.min
//= require jquery.remotipart
//= require jquery-ui
//= require cocoon
//= require autocomplete-rails
//= require moment
//= require bootstrap-datetimepicker
//= require ../common_js/custom
//= require jquery-ui/widgets/autocomplete
//= require tinymce
//= require common_js/jquery.raty.js
//= require_self

The complete code is:

$(function () {
    new app.PopularSchools;
});

var app = window.app = {};

app.PopularSchools = function () {
    this._input = $('#search-txt');
    this._initAutocomplete();
};

app.PopularSchools.prototype = {
    _initAutocomplete: function () {
        this._input
            .autocomplete({
                source: 'popular_schools/get_all_schools',
                appendTo: '#search-results',
                select: $.proxy(this._select, this)
            })
            .autocomplete('instance')._renderItem = $.proxy(this._render, this);
    },
    _render: function (ul, item) {
        var markup = [
            '<span class="name">' + item.name + '</span>',
        ];
        return $('<li>')
            .append(markup.join(''))
            .appendTo(ul);
    },
    _select: function (e, ui) {
        $("#id").val(ui.item.id);
        $("#type").val(ui.item.type);
        this._input.val(ui.item.name);
        return false;
    }
};```

[rtsinani]

Hey @webitdev2015, do you have an input with id search-txt?

[webitdev2015]

Yes, that is correct.

Here is field code:

<%= text_field_tag :name, "", id: "search-txt", class: "ui-autocomplete-input form-control" %>

[rtsinani]

What version of jQuery UI are you using?

[webitdev2015]

@rtsinani I am using GEM gem 'jquery-ui-rails' of jQuery UI.

The Gemfile.lock says its jquery-ui-rails (6.0.1)

[rtsinani]

@webitdev2015 Have you tried the example project?