无法从 select2 搜索结果中选择结果

Posted 2023-02-24

【中文标题】无法从 select2 搜索结果中选择结果

【英文标题】：Unable to select a result from the select2 search results

【发布时间】：2013-04-02 18:22:21

【问题描述】：

我正在使用 select2 作为我的搜索框。我从我的 URL 获取结果，但我无法从中选择一个选项。我想使用“product.productName”作为选择后显示的文本。有什么我错过的或我犯的任何错误。我已经包含了 select2.css 和 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;
             
        );
    );

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

【参考方案1】：

您缺少结果数据的 id 属性。如果没有，则使选项“不可选择”。

例子：

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

【讨论】：

节省了我的时间！！...他们的文档很糟糕！..他们的 AJAX 示例应该提到这一点...

Telvin，链接坏了。顺便说一句，添加 ID 对我没有任何影响。

@AlexanderSuraphel 这个答案发生在四年前，它应该解决 OP 问题，以防链接被破坏所以我把示例代码指出来，所以参考无关紧要.该插件也正在更新，许多事情已经改变。现在我不知道你的问题是什么。对不起。

@TelvinNguyen 好的。对我来说，现在删除链接是有意义的。再加上没有人来 SO 来解决“OP”问题。人们在这里回答是为了帮助很多人。

@AlexanderSuraphel 我同意删除链接。它应该显示为什么需要 id。我正在删除该链接，因为它不再可用。但是，请不要将其视为个人信息，因为它对您没有帮助，请仔细阅读 SO 答案的工作原理***.com/help/how-to-answer（回答问题）

【参考方案2】：

因为我使用的是 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,
                    
                )
            
        ,
    ,
);

【参考方案3】：

id 参数可以是与对象属性名称相关的字符串，并且必须在对象的根目录中。数据对象内的文本。

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

【参考方案4】：

我遇到了同样的问题，这个问题的其他解决方案是：-

在您的响应对象中（在上述响应产品详细信息对象中）必须有一个“id”作为键和值。

示例：- 您上面给出的响应对象必须是这样的

"id":"1","productName":"samsung galaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Silver;32GB"

所以你不需要这个 id: function(object)return object.key;