无法从select2搜索结果中选择结果 [英] Unable to select a result from the select2 search results

问题描述

我在我的搜索框中使用了select2。我从我的网址获取结果，但我无法从中选择一个选项。我想使用'product.productName'作为选择后显示的文本。有什么我错过了或者我犯过的错误。我已经包含了select2.css和select2.min.js，jquery.js

 函数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>; 
返回标记; 
} 
 
函数dataFormatSelection（product）{
 return product.productName; 
 
 $（document）.ready（function（）{
 $（＃e7）。select2（{
 placeholder：搜索产品，
 minimumInputLength：2，
 ajax：{
 url：myURL，
 dataType：'json'，
 data：function（term，page）{
 return { 
 productname：term 
}; 
}，
结果：function（data，page）{
 
 return {results：data.result_object}; 
 
 
 formatResult：dataFormatResult $ b $ 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}] 
  

解决方案

结果数据缺少id属性。例如：

 <$ c如果它没有，它会让选项不可选择。
 
 
 $ c $（'＃e7'）。select2（{
 id：function（e）{return e.productName;}，
}）; 
  

I am using the select2 for on of my search boxes. I'm getting the results from my URL but I'm not able to select an option from it. I want to use the 'product.productName' as the text to be shown after selection. Is there anything that I have missed out or any mistake that I have made. I have included select2.css and 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;
            } 
        });
    });

This is my 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"}]

解决方案

You are missing id attribute for result data. if it has not, it makes option "unselectable".

Example:

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

这篇关于无法从select2搜索结果中选择结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！