2013-04-10 57 views
10

我正在使用select2来搜索我的搜索框。我从我的网址获取结果,但我无法从中选择一个选项。我想使用'product.productName'作为选择后显示的文本。有什么我错过了或者我犯过的错误。我已经包括select2.css和select2.min.js,jquery.js和无法从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; 
      } 
     }); 
    }); 

这是我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"}] 

回答

34

你缺少对结果数据id属性。如果没有,则使选项“不可选”。

例子:

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

救了我的时间!......他们有可怕的文件。他们的AJAX的例子!应该提到这个... – 2017-06-10 05:38:50

+0

特尔文,链接是坏的..顺便说一句,添加ID并没有对我有所帮助。 – 2017-06-25 17:23:43

+0

@AlexanderSuraphel这个答案发生在四年前,它应该解决OP问题,万一链接将被破坏,所以我把示例代码指出来,所以引用不是问题。该插件也得到更新,许多事情已经改变。现在我不知道你的问题是什么。抱歉。 – 2017-06-26 02:42:49

0

我也面临着同样的问题,对于这个问题的其他解决方案是: -

在您的响应对象(在上面的响应产品详细介绍对象)必须有一个“id”作为它的关键和价值。

实施例: - 您上面给出响应的对象必须是这样

{ “ID”: “1”, “产品名称”: “三星Galaxy S3”, “制造商”: “三星”, “productOptions” : “颜色;记忆”, “productOptiondesc”: “银; 32GB”}

,所以你不需要这个 ID:函数(对象){返回object.key;}

0

的ID PARAM可以是与对象属性名称相关的字符串,并且必须位于对象的根目录中。数据对象内的文本。

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

由于我使用AJAX,什么工作对我来说是返回的东西作为processResults的ID:

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