Rhys Edwards Rhys Edwards - 13 days ago 5
Javascript Question

Jquery UI 1.12 Cannot set property '_renderItem' of undefined

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

Answer

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/