Ajax-Anfrage Select2 - Resultlist immer leer

Question

Ich habe versucht, das Select 2-Plugin mit Ajax als Datenquelle zu verwenden, aber ich bekomme immer "Keine Ergebnisse gefunden" in der Ergebnisliste, nachdem ich einige Buchstaben eingegeben habe. Ich erwartete, dass es alle gefundenen Elemente (Feld: Nachname) aus meiner Ajax-Antwort in meinen Suchergebnissen auflisten würde. Ich habe die Ajax-Antwort am Ende dieses Posts angehängt.

Mein HTML-select-Element:

<select class="player-select form-control"> 
</select> 

Mein Select2 JS:

jQuery(document).ready(function() { 
    $(".player-select").select2({ 
     ajax: { 
      url: "/database/players.php", 
      dataType: "json", 
      delay: 250, 
      processResults: function (data) { 
       // parse the results into the format expected by Select2. 
       // since we are using custom formatting functions we do not need to 
       // alter the remote JSON data 
       return { 
        results: data.LastName 
       }; 
      } 
     }, 
     minimumInputLength: 1, 
    }) 
}); 

Meine AJAX Antwort:

[ 
    { 
     "Id":"27", 
     "FirstName":"Joe", 
     "LastName":"Cole", 
     "CommonName":null, 
     "Rating":"72", 
     "Position":"14", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"34079", 
     "FirstName":"Ashley", 
     "LastName":"Cole", 
     "CommonName":null, 
     "Rating":"77", 
     "Position":"14", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"146545", 
     "FirstName":"David", 
     "LastName":"C\u00f3rcoles Alcaraz", 
     "CommonName":"C\u00f3rcoles", 
     "Rating":"66", 
     "Position":"45", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"171565", 
     "FirstName":"Miguel", 
     "LastName":"Linares C\u00f3lera", 
     "CommonName":"Linares", 
     "Rating":"69", 
     "Position":"45", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"180216", 
     "FirstName":"S\u00e9amus", 
     "LastName":"Coleman", 
     "CommonName":null, 
     "Rating":"81", 
     "Position":"25", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"189884", 
     "FirstName":"Shannon", 
     "LastName":"Cole", 
     "CommonName":null, 
     "Rating":"63", 
     "Position":"195", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"198199", 
     "FirstName":"Pablo", 
     "LastName":"Alcolea Guerrero", 
     "CommonName":"Alcolea", 
     "Rating":"63", 
     "Position":"45", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"203268", 
     "FirstName":"Larnell", 
     "LastName":"Cole", 
     "CommonName":null, 
     "Rating":"63", 
     "Position":"14", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    }, 
    { 
     "Id":"219795", 
     "FirstName":"Joel", 
     "LastName":"Coleman", 
     "CommonName":null, 
     "Rating":"56", 
     "Position":"14", 
     "LastPriceUpdate":"0000-00-00 00:00:00" 
    } 
] 

Answer 1

Ihre Methode processResults würde leicht variieren, da Sie versuchen, ein benutzerdefiniertes Ergebnis zu erhalten, das für jedes Element LastName entspricht. Ich habe Kommentare hinzugefügt, damit Sie wissen, was zu tun ist.

processResults: function(data, params) { 
    var resData = [];//just to store matching data 
    //iterate through each data 
    data.forEach(function(value) { 
    //check if the LastName param contains the search param entered 
    if (value.LastName.indexOf(params.term) != -1) 
     resData.push(value)//push the item to resData array 
    }) 
    return { 
    results: $.map(resData, function(item) { 
     //now while returning you need to map the array text and id property since you are 
     //returning custom query 
     return { 
     text: item.LastName, 
     id: item.Id 
     } 
    }) 
    }; 
}, 

A Full Demo Here