2013-04-10 16 views
10

Używam opcji select2 do włączenia moich pól wyszukiwania. Dostaję wyniki z mojego adresu URL, ale nie jestem w stanie wybrać z niego opcji. Chcę użyć "product.productName" jako tekstu, który zostanie wyświetlony po wyborze. Czy jest coś, czego mi brakowało lub jakikolwiek błąd popełniłem. Mam włączone select2.css i select2.min.js, jquery.jsNie można wybrać wyniku z wyników wyszukiwania select2

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

To mój 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"}] 

Odpowiedz

34

Brakuje atrybut id dla danych wynikowych. jeśli nie, to opcja "nie można wybrać".

Przykład:

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

uratował mi czas !! ... Mają straszny dokumentacji .. Ich przykład AJAX! powinienem wspomnieć o tym ... –

+0

Telvin, link jest zepsuty .. I dodawanie identyfikatora Btw nie robi dla mnie różnicy. –

+0

@AlexanderSuraphel Ta odpowiedź wydarzyła się cztery lata temu i miała rozwiązać problem OP, na wypadek, gdyby link się zepsuł, więc wstawiłem przykładowy kod, żeby go wskazać, więc referencja nie ma znaczenia. Wtyczka również otrzymuje aktualizację i wiele rzeczy zostało zmienionych. Teraz nie mam pojęcia, jaki masz problem. Przepraszam. –

0

Mam wobec tego samego problemu, inne rozwiązanie tego problemu jest: -

W swoim obiekcie odpowiedzi (W powyższej reakcji Dane produktu Object) musi mieć „id” jako klucz i wartość dla tego.

przykład: - Your dany powyżej cel reakcja musi być tak

{ "id": "1", "productName": "Galaxy S3", "Producent": "Samsung", "productOptions" "Kolor; Pamięć", "productOptiondesc": "Srebrny; 32GB"}

więc nie potrzebują tego ID: function (object) {return object.key;}

0

id param może być ciągiem związanym z nazwą właściwości obiektu i musi znajdować się w katalogu głównym obiektu. Tekst wewnątrz obiektu danych.

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

Ponieważ używałem AJAX, co pracował dla mnie wracał coś jako identyfikator na 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, 
        } 
       }) 
      } 
     }, 
    }, 
}); 
Powiązane problemy