Jquery UI 1.12無法設置屬性'_renderItem'的undefined

Question

我從Jquery的UI庫中引發錯誤。我試圖調用自動完成功能，但是我被送達以下錯誤：

Cannot set property '_renderItem' of undefined

任何人都可以看到我要去哪裏錯了嗎？我正在努力調試這個。

自動完成腳本

$('#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"} 
    ] 

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') 

自動完成輸入

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本身

檢查根據您的需要以下工作撥弄。只需輸入城市的第一個字母，自動完成將顯示過濾後的響應。

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

Answer 2

試試這個？

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