Jquery UI 1.12 Cannot set property '_renderItem' of undefined
<p>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:</p>

<p><code>Cannot set property '_renderItem' of undefined</code></p>

<p>Can anyone see where I'm going wrong? I'm struggling to debug this.</p>

<p>Autocomplete script</p>

<pre><code>$('#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 $( "&lt;li&gt;&lt;/li&gt;" )
                    .data( "ui-autocomplete-item", item )

                    .append( "&lt;a&gt;" + item.name + "&lt;/a&gt;" )
                    .appendTo( ul );
            };

      })
</code></pre>

<p>I've taken this code from another <a href="https://stackoverflow.com/questions/9513251/cannot-set-property-renderitem-of-undefined-jquery-ui-autocomplete-with-html">stackoverflow answer</a> and this <a href="http://jsfiddle.net/NsBGH/" rel="nofollow noreferrer">JSfiddle</a>, but perhaps these examples are no longer viable.</p>

<p>Here is the data I'm using. Eventually I will only want to return the <code>City</code> and <code>country</code> values.</p>

<pre><code>  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"}
  ]
</code></pre>

<p>layout.jade</p>

<pre><code>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')
</code></pre>

<p>autocomplete input</p>

<pre><code>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
</code></pre>