Impossibile selezionare un risultato dai risultati di ricerca select2

Question

Sto usando select2 per le mie caselle di ricerca. Sto ottenendo i risultati dal mio URL ma non sono in grado di selezionare un'opzione da esso. Voglio usare "product.productName" come testo da mostrare dopo la selezione. C'è qualcosa che ho perso o un errore che ho fatto. Ho incluso select2.css e select2.min.js, 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; 
      } 
     }); 
    }); 

Questo è il mio 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

Ti manca attributo id per i dati di risultato. se non lo ha, rende l'opzione "non selezionabile".

Esempio:

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

Answer 2

ho affrontato lo stesso problema, altra soluzione per questo problema è: -

Nell'oggetto risposta (in risposta al di sopra Dati del prodotto oggetto) deve avere un "id" come chiave e valore per questo.

Esempio: - Il vostro sopra determinato oggetto risposta deve essere come questo

{ "id": "1", "productName": "Samsung Galaxy S3", "costruttore": "Samsung", "ProductOptions" : "Colore; memoria", "productOptiondesc": "Silver; 32GB"}

SO non è necessario questo ID: function (oggetto) {return object.key;}

Answer 3

il parametro ID può essere una stringa correlata al nome della proprietà dell'oggetto e deve trovarsi nella radice dell'oggetto. Testo all'interno dell'oggetto dati.

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

Dal momento che stavo usando AJAX, che cosa ha funzionato per me era tornare qualcosa come ID su processResults:

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