Select2 4.0.0不能选择结果

我想使用最新版本的Select2查询我的网站的API并返回一个多选。它获取正确的数据，甚至可以正确格式化下拉菜单，将返回对象中的两个键合并为“（A-123）John Johnson”，但下拉菜单没有响应鼠标悬停或点击。Select2 4.0.0不能选择结果

我正在使用select2.full.min.js和select2.min.css文件。为了项目的目的，我将它们包含在目录中，并通过cshtml中的Bundles访问它们，而不是通过CDN访问它们。

HTML：

<div> 
    <select class="user-list" multiple="multiple" style="width: 100%"> 
    </select> 
</div>

目前，它看起来像这一点，这就是我想要的： properly-formatted dropdown

不知道这是否是相关的，但是当我浏览生成的源代码在搜索时，输入看起来很好，但下拉的代码呈灰色，好像它隐藏了一样。

solid/opaque input code

greyed out dropdown code

每我已经在这里和其他地方发现了其他的建议，我已经尝试了一些不同的解决方案。我最终发现了templateResult和templateSelection应该如何工作（不是特别感谢文档），并尝试返回ID，但我仍然无法真正选择任何东西，甚至在我将鼠标悬停在上面时得到响应选项。

这里是我最终结束了，包括一些调试，以确保返回的对象是有效的。

JS：

 // Setup autocomplete/select for User filter 
     $(".user-list").select2({ 
      ajax: { 
       url: "[api url]", 
       type: "GET", 
       dataType: "json", 
       data: function (params) { 
        return { 
         search: params.term, // search term 
         page: params.page 
        }; 
       }, 
       processResults: function (data) { 
        console.log(JSON.stringify(data)); 
        return { 
         results: data 
        }; 
       }, 
      }, 
      escapeMarkup: function (markup) { return markup; }, 
      id: function (data) { return data.Id.toString(); }, 
      minimumInputLength: 1, 
      templateResult: function (data, page) { 
       return "(" + data.User + ") " + data.Name; 
      }, 
      templateSelection: function (data, page) { 
       return "(" + data.User + ") " + data.Name; 
      } 
     })

ID是一个GUID，还有其他两个领域，我会打电话给名和用户。

数据样本：

[ 
    { 
     "Id":"a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1", 
     "Name":"John Johnson", 
     "User":"A-123" 
    }, 
    { 
     "Id":"b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2", 
     "Name":"Tom Thompson", 
     "User":"B-456" 
    } 
]

我不想增加的问题一堆，似乎是这个，但我发现大多数成果已为老版本显著不同的选择，他们只是还没有为我工作。

来源

2015-07-11 MikeOShay

也许有点不规则上我自己的问题发表意见，但我不知道为什么我会m没有任何实际反馈而被低估。我在这个插件的新版本中没有看到有关帮助主题或故障排除文档的信息，我认为这个问题足以帮助任何人，而我在这里就自己的问题提供了尽可能详细的信息。 – MikeOShay

在这里看看：http://stackoverflow.com/questions/29035717/select2-load-data-using-ajax-cannot-select-any-option 请注意，你有'ID'属性 - 而不是'ID'，这可能导致问题。 – akn

这是它的一部分。不喜欢继续关注文档，但对我而言，它并没有明确规定该要求，也不知道如何处理数据或如何使用templateResult或templateSelection。要真正了解这一点，实际上你必须在文档站点本身查看源代码HTML和JS，这是教人们使用插件的一种非常糟糕的方式。无论哪种方式，我想出了哪些选项与新版本相关，并得到它返回“ID”而不是“ID”，它的工作。 – MikeOShay

select2的操作方式是，它使用每个数据对象的“id”值并将它们放入原始Select元素作为选定的选项。这是区分大小写的。

默认情况下，它会根据数据对象的“文本”值显示下拉选项和所选元素。这不允许自定义格式。

如果（像我一样）要返回不同的数据选项，您仍然需要在ajax下的processResults选项返回的对象中将字段返回为“id”，或将字段重新映射为“id”。然后使用templateResult和templateSelection设置以及其他返回的数据来显示您想要的内容。

如果您正确地返回并解析除id之外的所有内容，您可能会收到一个功能清单，但无法选择任何选项。

我的项目对下拉菜单的要求有所改变，但这里是我结束的地方。它工作正常，多= =“多个”属性添加到使其成为一个多选。

<select class="select2" style="width:100%; height: 100%;"> 
    <option></option> 
</select> 

$(".select2").select2({ 
    ajax: { 
     url: "[api url]", 
     method: "get", 
     data: function (params) { 
      return { 
       search: params.term 
      }; 
     }, 
     processResults: function (data) { 
      return { 
       results: data 
      }; 
     }, 
     cache: true 
    }, 
    placeholder: "Enter a User ID or Name", 
    templateResult: function(data) { 
      return "(" + data.user + ") " + data.name; 
    }, 
    templateSelection: function(data) { 
     return "(" + data.user + ") " + data.name; 
    } 
}).ready(function() { 
    $(".select2-selection__placeholder").text("Enter a User ID or Name") 
})

这是我最初的问题的可能一部分在实施修复老版本选择二的，它有一个完全不同的可用选项/设置，所有的尝试。

此外，还有一点注意，“占位符”属性目前不支持自定义模板。它试图强制占位符文本转换为结果格式，该格式显示使用此代码“（未定义）未定义”。要修复它，需要一个空白选项并替换select2.ready上的文本。

来源

2015-07-21 20:41:55 MikeOShay

我有同样的问题。解决方案：补充这一部分：

_.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; });

（使用下划线）

我的init

$(".js-data-example-ajax").select2({ 
    ajax: { 
     url: "api/MyApi/MyApi", 
     method: "POST", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
       SearchPart: params.term, // search term 
       page: params.page 
      }; 
     }, 
     processResults: function (data, params) { 

      params.page = params.page || 1; 
      _.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; }); 

      return { 
       results: data.ResultObject, 
       pagination: { 
        more: (params.page * 30) < data.total_count 
       } 
      }; 
     }, 
     cache: true 
    }, 
    multiple: true, 
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
    minimumInputLength: 3, 
    tags: true, 
    templateResult: self.Select2FormatData, // omitted for brevity, see the source of this page 
    templateSelection: self.Select2FormatDataSelection // omitted for brevity, see the source of this page 
});

来源

2016-07-01 10:48:53

Select2 4.0.0不能选择结果

回答

相关问题