标签: jquery-select2

我在一个项目中使用 Select2，它的样式从其他 bootstrap(ed) 组件中脱颖而出。就我个人而言，我喜欢 select2 的外观，但需要创建一致性。在早期版本中，我从这里使用了 select2 boostrap css 3

这在 Select2 4.0 上不起作用，有人有任何想法或提示吗？至少，我想调整Select2的高度。

非常感激...

我正在为我正在开发的某个系统创建一个界面，我需要围绕系统中其他地方使用的预先存在的 PHP AJAX 函数编写 Javascript（纯粹是因为做我们的数据库工作的人太忙了）使代码适应我的需要）。

使用 Select2，我需要创建一个选择字段，用户在数据库中搜索他们的姓名并选择与其匹配的姓名，以便稍后可以将其发布到另一个 AJAX 函数。我已经使用以下代码完成了此操作：

//<select id="sltMyName" style="width: 100%;"></select>

    $("#sltMyName").select2({
      ajax: {
          type: "POST",
          url: "includes/php/report_searchPlayers.php",
          delay: 250,
          data: function (params) {
              return {
                  q: params.term // search term
              };
          },
          processResults: function (data) {
                console.log({ results: data.split(",") });
                return { results: data.split(",") };
          }
      },
      minimumInputLength: 1
    });

这应该将返回的字符串格式转换name1,name2,name3,name...为 Select2 显示所需的格式，但是，它当前不起作用。下拉菜单仅显示为空白。

我见过一些涉及 text 和 id 属性的问题，但是，它们都在返回的 JSON 字符串的上下文中，所以我不确定这里是否需要它们以及如何在这种上下文中使用它们。此外，我在文档中找不到任何这些内容。

有什么建议么？提前致谢。

返回数据： Tommy,Jak_Tommy_Lee_Jones,Tommy_Shelby,Tommy_Balboner,TommyCZ,GA_Tommy,VA_Tommy,Tommy_Skrattar,Tommy_Knocker,Tommy_of_Elektro,Tommy_the_Destroyer,Old_Tommy,tommy_of_house_shelby,TommyDermo,TommyC,TommyCash_CZ,Tommyb69k,SA_Tommy,tommyfaster,Tommy_See,Tommy_de_Destroyer,Tommy_of_Whiteroses,TommyShelby,Templar_Intiate_Tommy,Templar_Initiate_Tommy,tommysuckspp,Tommy_the_Overweight

尝试使用 Select2 （v 4.0.6.rc1）对 ajax 数据进行分页，以便用户可以找到更多结果（如果不存在于第一个限制中），使用以下内容但不检索数据。如果有人帮助我，我将不胜感激关于分页的例子不多。

我试图使用这个问题Select2 v4 how to paginate results using AJAX 的帮助对数据进行分页，它似乎不起作用，获取数组但格式不正确。

JS：

  $('#compose_username').select2({
        dropdownParent: $("#modal-compose") ,
        placeholder: "Search Username...",
        minimumInputLength: 1,
        ajax: {
            url: "username.php",
            dataType: 'json',
            delay: 250,
            cache: false,
            data: function (params) {
                return {
                    term: params.term,
                    page: params.page || 1                      
                    //a: params.term, // search term
                    //psf: params.page
                };
            },
            processResults: function(data) {
                console.log(data);
                var result = $.map(data, function (item) { return { id: item.id, text: item.username }});
                return { results: result …

我遇到了一个奇怪的问题，除了 select2 之外，一切都按预期工作。我有 Rails 6.0.0 应用程序并通过安装 select2 yarn add select2。

然后我将其添加到 application.js 文件中。文件如下所示。

    #app/javascripts/packs/application.js

    require("@rails/ujs").start()
    require("turbolinks").start()
    require("@rails/activestorage").start()
    require("channels")
    require('datatables.net')
    require('datatables.net-dt')
    require('datatables.net-bs4')
    require('select2')

    import  "bootstrap"
    import 'popper.js/dist/popper.js';
    import $ from 'jquery';
    global.$ = jQuery;
    import  "chart.js"
    import 'select2'; // globally assign select2 fn to $ element
    import 'select2/dist/css/select2.css';  // optional if you have css loader

    document.addEventListener("turbolinks:load", () => {
        setTimeout(function() {
          $('.success, .alert').fadeOut();
        }, 10000); 
    })

现在看起来像这个 select2 下拉框

当我转到 Chrome 开发人员工具中的“源”选项卡时，它仅显示select2/dist/jsnode_modules 下的文件夹。我已经尝试precompiling过clobbering资产但不起作用。整个过程在我的本地运行良好，只会在生产服务器中引起问题。

编辑： …