2

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

2 Answers 2

1

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/

3
  • Thanks Deep! Are you able to give a brief explanation on what's going on in the code? Nov 27, 2016 at 17:56
  • @RhysEdwards I have updated few code explanation comments, Hope this will help.
    – Deep
    Nov 27, 2016 at 18:04
  • 1
    For Jquery-ui 1.12, it has changed again to: .autocomplete( "instance" )._renderItem. Refer to: jqueryui.com/autocomplete/#custom-data
    – Pierre
    Nov 9, 2017 at 18:09
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 );
            };
3
  • Please can you also share the other source items, such as the html you use Nov 27, 2016 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. Nov 27, 2016 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. Nov 27, 2016 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.