Jquery UI 1.12未定義の '_renderItem'プロパティを設定できません

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); 
      };