javascript - Jquery UI 1.12 无法设置未定义的属性 '_renderItem'

Question

Jquery 的 UI 库向我抛出错误。我正在尝试调用自动完成功能，但是出现以下错误:

无法设置未定义的属性“_renderItem”

有人能看出我哪里出错了吗？我正在努力调试这个。

自动完成脚本

$('#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 );
            };

      })

我从另一个 stackoverflow answer 获取了此代码还有这个JSfiddle ，但也许这些例子不再可行。

这是我正在使用的数据。最终我只想返回 City 和 country 值。

  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"}
  ]

布局.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')

自动完成输入

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 1

如果未找到附加自动完成功能的元素，则会出现您指定的问题。

您提供的供引用的 JSfiddle 缺少 jquery 本身的包含

根据您的要求检查以下工作 fiddle 。只需输入城市的第一个字母，自动完成功能就会显示过滤后的响应。

        $(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/