Es konnte kein Ergebnis aus den Suchergebnissen von select2 ausgewählt werden.

Question

Ich verwende select2 für eines meiner Suchfelder. Ich erhalte die Ergebnisse von meiner URL, kann jedoch keine Option auswählen. Ich möchte den 'product.productName' als Text verwenden, der nach der Auswahl angezeigt wird. Gibt es etwas, was ich verpasst habe oder einen Fehler, den ich gemacht habe? Ich habe select2.css und select2.min.js enthalten, jquery.js

function dataFormatResult(product) { 
     var markup = "<table class='product-result'><tr>"; 

     markup += "<td class='product-info'><div class='product-title'>" +  product.productName + "</div>"; 
     if (product.manufacturer !== undefined) { 
      markup += "<div class='product-synopsis'>" + product.manufacturer + "</div>"; 
     } 
     else if (product.productOptions !== undefined) { 
      markup += "<div class='product-synopsis'>" + product.productOptions + "</div>"; 
     } 
     markup += "</td></tr></table>"; 
     return markup; 
    } 

    function dataFormatSelection(product) { 
     return product.productName; 
    } 
    $(document).ready(function() { 
     $("#e7").select2({ 
      placeholder: "Search for a product", 
      minimumInputLength: 2, 
      ajax: { 
       url: myURL, 
       dataType: 'json', 
       data: function(term,page) { 
        return { 
         productname: term 
        }; 
       }, 
       results: function(data,page) { 

        return {results: data.result_object}; 
       } 
      }, 
      formatResult: dataFormatResult, 
      formatSelection: dataFormatSelection, 
      dropdownCssClass: "bigdrop", 
      escapeMarkup: function(m) { 
       return m; 
      } 
     }); 
    }); 

Das ist mein resut_object

"result_object":[{"productName":"samsung galaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Silver;32GB"},{"productName":"samsung salaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Graphite;32GB"},{"productName":"samsung galaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Silver;16GB"}] 

Answer 1

Sie vermissen id-Attribut für Ergebnisdaten. Wenn dies nicht der Fall ist, wird die Option "nicht auswählbar" gemacht.

Beispiel:

  $('#e7').select2({ 
        id: function(e) { return e.productName; }, 
      }); 

Answer 2

ich das gleiche Problem konfrontiert, andere Lösung für dieses Problem ist: -

In Ihrem Antwortobjekt (In oben Antwort Objekt Produktdetails) eine „id“ hat als Schlüssel und Wert dafür.

Beispiel: - Ihre oben angegebenen Antwortobjekt muss wie diese

{ "id": "1", "product": "Samsung Galaxy S3", "Hersteller": "Samsung", "Product" : "Farbe; Gedächtnis", "productOptiondesc": "Silber; 32GB"}

SO brauchen Sie nicht diese id: function (Objekt) {return object.key;}

Answer 3

Die id param kann eine Zeichenfolge sein, die sich auf den Namen der Objekteigenschaft bezieht und sich im Stammverzeichnis des Objekts befinden muss. Text innerhalb des Datenobjekts

var fruits = [{code: 222, fruit: 'grape', color:'purple', price: 2.2}, 
    {code: 234,fruit: 'banana', color:'yellow', price: 1.9} ]; 

$(yourfield).select2(
{ 
    id: 'code', 
    data: { results: fruits, text: 'fruit' } 
} 
); 

Answer 4

Da ich AJAX wurde mit, was für mich gearbeitet wurde auf processResults etwas wie die ID Rückkehr:

$(field).select2({ 
    ajax: { 
     // [..] ajax params here 
     processResults: function(data) { 
      return { 
       results: $.map(data, function(item) { 
        return { 
         // proccessResults NEEDS the attribute id here 
         id: item.code, 
         // [...] other attributes here 
         foo: item.bar, 
        } 
       }) 
      } 
     }, 
    }, 
});