Jquery Autocomplete _renderItem funktioniert nicht

Question

_renderItem wird überhaupt nicht ausgeführt, versucht mit console.log auch keine Nachrichten gedruckt. Versucht mit "Autocomplete", "Auto-Autovervollständigung", "Autocomplete" Attribute keine Hoffnung.

Darüber hinaus konnte ich den Zweck der "Antwort mit Kartenfunktionen" nicht verstehen, also deaktiviert es.

$(document).ready(function() { 

myVars.shId = $('#dataVar').attr('sh-data'); 

///// search ////// http://jsbin.com/xavatajiku/edit?js,output 
console.log(myVars.shId); 
$('#name-list').autocomplete({ 

     source: function (request, response) { 
      $.ajax({ 
       url: myVars.czbUrl, 
       data: { searchText: request.term, maxResults: 10, shopId: myVars.shId }, 
       dataType: "json", 
       success: function (data) { 
        console.log(data); 
        /*response($.map(data, function (item) { 
         console.log(data); 
         return { 

          value: item.product_name, 
          avatar: item.pfimage_thumb, 
          rep: item.product_name, 
          selectedId: item.url 
         }; 
        }))*/ 
       } 
      }) 
     }, 
     select: function (event, ui) { 

          alert(ui.item ? ("You picked '" + ui.item.label) 
                 : "Nothing selected, input was " + this.value); 

      return false; 
     } 
    }).autocomplete("instance")._renderItem = function (ul, item) { 
     console.log('test'); 
     /*var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.pfimage_thumb + '"></div><div class="label"><h3> Reputation: ' + item.volume + '</h3></div><div class="description">' + item.product_name + '</div></div></a><hr/>'; 
     return $("<li></li>") 
       .data("ui-autocomplete-item", item) 
       .append(inner_html) 
       .appendTo(ul);*/ 
    }; 

HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

<h4>search:<input type="text" id="name-list" /></h4> 

Answer 1

Ein paar kleine Korrekturen und Sie sollten auf Ihrem Weg:

Beispiel: https://jsfiddle.net/Twisty/3gm3sfem/

JavaScript

$(function() { 
    var myData = [{ 
    product_name: "Name 1", 
    pfimage_thumb: "thumb1.jpg", 
    url: "url1" 
    }, { 
    product_name: "Name 2", 
    pfimage_thumb: "thumb2.jpg", 
    url: "url2" 
    }, { 
    product_name: "Name 3", 
    pfimage_thumb: "thumb3.jpg", 
    url: "url3" 
    }]; 
    $('#name-list').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "/echo/json/", 
     data: { 
      json: JSON.stringify(myData) 
     }, 
     dataType: "json", 
     type: "POST", 
     success: function(data) { 
      console.log(data); 
      response(data); 
     } 
     }) 
    }, 
    select: function(event, ui) { 
     alert(ui.item ? ("You picked '" + ui.item.label) : "Nothing selected, input was " + this.value); 
     return false; 
    } 
    }).autocomplete("instance")._renderItem = function(ul, item) { 
    console.log('test'); 
    var item = $('<div class="list_item_container"><div class="image"><img src="' + item.pfimage_thumb + '"></div><div class="label"><h3> Reputation: ' + item.volume + '</h3></div><div class="description">' + item.product_name + '</div></div>') 
    return $("<li>").append(item).appendTo(ul); 
    }; 
}); 

Wenn Ihre Daten zurückkommen, übergeben Sie sie an response(), um sicherzustellen, dass die Menmu gerendert werden. Sie brauchen nicht <a> seit select wird in beide Richtungen gefeuert werden.