Không thể chọn kết quả từ kết quả tìm kiếm select2

Question

Tôi đang sử dụng select2 cho các hộp tìm kiếm của mình. Tôi nhận được kết quả từ URL của mình nhưng tôi không thể chọn tùy chọn từ nó. Tôi muốn sử dụng 'product.productName' làm văn bản được hiển thị sau khi lựa chọn. Có bất cứ điều gì mà tôi đã bỏ lỡ hoặc bất kỳ sai lầm mà tôi đã thực hiện. Tôi đã bao gồm select2.css và 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; 
      } 
     }); 
    }); 

Đây là resut_object tôi

"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

Bạn đang thiếu thuộc tính id cho dữ liệu kết quả. nếu nó không có, nó làm cho tùy chọn "không thể chọn".

Ví dụ:

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

Answer 2

tôi đã phải đối mặt với cùng một vấn đề, giải pháp khác cho vấn đề này là: -

Trong đối tượng trả lời của bạn (Để đối phó trên Chi tiết sản phẩm đối tượng) phải có một "id" như là chìa khóa và giá trị cho điều đó.

Ví dụ: - đối tượng phản ứng đưa ra ở trên của bạn phải như thế này

{ "id": "1", "productName": "samsung galaxy s3", "nhà sản xuất": "Samsung", "productOptions" : "Màu; Memory", "productOptiondesc": "Bạc; 32GB"}

SO bạn không cần id này: function (object) {return object.key;}

Answer 3

id param thể là một chuỗi liên quan đến tên thuộc tính đối tượng và phải nằm trong thư mục gốc của đối tượng. Văn bản bên trong đối tượng dữ liệu.

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

Kể từ khi tôi đã sử dụng AJAX, những gì làm việc cho tôi là trở về một cái gì đó như là ID trên 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, 
        } 
       }) 
      } 
     }, 
    }, 
});