Jquery UI 1.12 Cannot set property '_renderItem' of undefined

Question

I'm being thrown an error from Jquery's UI library. I'm trying to invoke the autocomplete function, however I am being served the following error:

Cannot set property '_renderItem' of undefined

Can anyone see where I'm going wrong? I'm struggling to debug this.

Autocomplete script

$('#autocomplete').autocomplete({
    minLength: 1,
    source: suggestion,
    focus: function(event, ui) {
                $('#autocomplete').val(ui.item.name);
                return false;
            },

    select: function(event, ui) {

        $('#autocomplete').val(ui.item.name);

                return false;
            }
        })

        .data( "ui-autocomplete" )._renderItem = function( ul, item ) {

                return $( "<li></li>" )
                    .data( "ui-autocomplete-item", item )

                    .append( "<a>" + item.name + "</a>" )
                    .appendTo( ul );
            };

      })

I've taken this code from another stackoverflow answer and this JSfiddle, but perhaps these examples are no longer viable.

Here is the data I'm using. Eventually I will only want to return the City and country values.

  var suggestion =

  [
  {"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"2","name":"Madang","city":"Madang","country":"Papua New Guinea","iata":"MAG","icao":"AYMD","latitude":"-5.207083","longitude":"145.7887","altitude":"20","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"3","name":"Mount Hagen","city":"Mount Hagen","country":"Papua New Guinea","iata":"HGU","icao":"AYMH","latitude":"-5.826789","longitude":"144.295861","altitude":"5388","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"4","name":"Nadzab","city":"Nadzab","country":"Papua New Guinea","iata":"LAE","icao":"AYNZ","latitude":"-6.569828","longitude":"146.726242","altitude":"239","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"5","name":"Port Moresby Jacksons Intl","city":"Port Moresby","country":"Papua New Guinea","iata":"POM","icao":"AYPY","latitude":"-9.443383","longitude":"147.22005","altitude":"146","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"6","name":"Wewak Intl","city":"Wewak","country":"Papua New Guinea","iata":"WWK","icao":"AYWK","latitude":"-3.583828","longitude":"143.669186","altitude":"19","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ]

layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='//code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css')
  body
    block content
  script(src='//code.jquery.com/jquery-1.11.3.js')
  script(src='//code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js')
  script(src='/javascripts/autocomplete.js')

autocomplete input

form(method='post', action='/add', class='form')
  .form-group
    input.form-control(type='text', name='destination' id='autocomplete')
  .form-group
    input.form-control(type='text', name='month')
  button.btn.btn-default(type='submit') Add Destination

Deep · Accepted Answer · 2016-11-27T18:02:55.793

The issue you have specified will occur if the element is not found where autocomplete is attached.

The JSfiddle you provided for reference is missing inclusion of jquery itself

Check the below working fiddle based on your requirement. Just enter the first letter of the city and the autocomplete will display the filtered response.

        $(function() {

             var suggestion =

  [
  {"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"2","name":"Madang","city":"Madang","country":"Papua New Guinea","iata":"MAG","icao":"AYMD","latitude":"-5.207083","longitude":"145.7887","altitude":"20","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"3","name":"Mount Hagen","city":"Mount Hagen","country":"Papua New Guinea","iata":"HGU","icao":"AYMH","latitude":"-5.826789","longitude":"144.295861","altitude":"5388","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"4","name":"Nadzab","city":"Nadzab","country":"Papua New Guinea","iata":"LAE","icao":"AYNZ","latitude":"-6.569828","longitude":"146.726242","altitude":"239","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"5","name":"Port Moresby Jacksons Intl","city":"Port Moresby","country":"Papua New Guinea","iata":"POM","icao":"AYPY","latitude":"-9.443383","longitude":"147.22005","altitude":"146","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"6","name":"Wewak Intl","city":"Wewak","country":"Papua New Guinea","iata":"WWK","icao":"AYWK","latitude":"-3.583828","longitude":"143.669186","altitude":"19","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ]

      $('#autocomplete').autocomplete({
    minLength: 1,
    source: function(request, response) {            
            var data = $.grep(suggestion, function(value) {
                return value.city.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase(); // Here the suggestion array is filtered based on what the user has typed. User input will be captured in the request.term
            });            

            response(data); // this will return the filtered data which will be attached with the input box.
    }

   }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {

                return $( "<li></li>" )
                    .data( "ui-autocomplete-item", item )

                    .append( "<a>" + item.city + "," + item.country + "</a>" )

                    .appendTo( ul ); // here we are creating and appending appending element based on the response object we got after filtering
            };

      });

http://jsfiddle.net/gomu04jx/

Thanks Deep! Are you able to give a brief explanation on what's going on in the code? — Rhys Edwards, Nov 27 '16 at 17:56
@RhysEdwards I have updated few code explanation comments, Hope this will help. — Deep, Nov 27 '16 at 18:04
For Jquery-ui 1.12, it has changed again to: .autocomplete( "instance" )._renderItem. Refer to: https://jqueryui.com/autocomplete/#custom-data — Pierre, Nov 09 '17 at 18:09

Jacques Joubert · Answer 2 · 2016-11-27T16:50:24.487

0

Try this?

$('#autocomplete').autocomplete({
    minLength: 1,
    source: suggestion,
    focus: function(event, ui) {
                $('#autocomplete').val(ui.item.name);
                return false;
            },

    select: function(event, ui) {

        $('#autocomplete').val(ui.item.name);

                return false;
            }
        })

        .data( "ui-autocomplete" )._renderItem = function( ul, item ) {

                return $( "<li></li>" )
                    .data( "ui-autocomplete-item", item )

                    .append( "<a>" + item.name + "</a>" )
                    .appendTo( ul );
            };

edited Nov 27 '16 at 16:50

answered Nov 27 '16 at 16:38

Jacques Joubert

111
1
10

Please can you also share the other source items, such as the html you use – Jacques Joubert Nov 27 '16 at 16:38
Hey Jacques, I did try that previously but unfortunately it didn't work. I've added my layout source and where html where I want to call the autocomplete. I'm using jade as my templating engine. – Rhys Edwards Nov 27 '16 at 16:45
just from the initial code you gave, the code breaks because of the closing curly bracket. See my update. In the meanwhile I am testing to see if I can get it working. – Jacques Joubert Nov 27 '16 at 16:51

Jquery UI 1.12 Cannot set property '_renderItem' of undefined

2 Answers2