Question

我将尽力解释我的问题。我正在尝试使用select2插件创建一种用户写一些字母的方法，并在每个字母上按下对API的调用，该API给出该API给出的前20个结果。

所以我选择了HTML：

<select name="filtre_products[]" class="form-control products-select2" multiple> 

</select>

然后是我的JS（已注释）：

$(".products-select2").select2({ 
    width: '100%', 
    closeOnSelect: false,
    placeholder: '',
    minimumInputLength: 3,
    query: function (query) {
        var data = {results: []}, i, j, s;
        if(query.term != null) {
            var ajax_r = [];
            $.ajax({
                url: 'ajax_products_recherche.php?limite=10&real_json=1&recherche='+query.term,
                success: function(data_a){
                    //Getting the data
                    data_a = JSON.parse(data_a);

                    //Looping through the each data and putting them inside a table
                    data_a.forEach( (e) => {
                        ajax_r.push(e);
                    });

                    //Filtering the data to get from it the id and the text to be used
                    ajax_r.forEach( (e) => {
                        var tmp = e.split('-');
                        var id = tmp[0];
                        var name = tmp[2];

                        data.results.push({value: id, text: name});
                    });

                    query.callback(data);
                }
            });
        }
    },
    //Sending the results to the function to modify the options as I please
    templateResult: formatResult
});

这是我使用的formatResult函数：

function formatResult(d) {
    if(d.loading) {
        return d.text;
    } 

    // Creating an option of each id and text
    $d = $('<option/>').attr({ 'value': d.value }).text(d.text);

    return $d;
}

我的问题是，select2应该在初始化时动态创建选项，从而实际上在选项中创建<li>并向其动态添加id等。但是，按照我创建它的方式，它会将选项放在<li>标记内，这不是我想要的，我希望它像他没有查询调用一样将其视为动态选项。

为您提供一些文档资源，它显示了我正在尝试做的一部分，但是该示例显示了如何显示我们编写的结果，我希望每次单击时都可以从api中显示，以及当然添加了多个选择： http://select2.github.io/select2/#data

Answer 1

对于您的ajax成功调用，请执行此操作或类似操作。我认为您不需要这么大的代码。下面的代码片段来自我的工作脚本。

success: function (data) {

                var dbSelect = $('#ddlItems'); // id for  Dropdown list
                dbSelect.empty();
                result = JSON.parse(data);
                // Parse result object and create your array collection in ajax_r object
                for (var i = 0; i < ajax_r.length; i++) {
                    dbSelect.append($('<option/>', {
                        value: ajax_r.item[i].Value,
                        text: ajax_r.item[i].Text
                    }));
                }
            }

Answer 2

我已经阅读了文档，发现ajax support似乎很符合您的需求。

在select2选项对象中，添加一个ajax对象。在此ajax对象中：

定义ajax调用的常规参数（URL，数据类型，延迟等）
在data属性中，定义函数，该函数返回应添加到queryString中的查询参数
在processResults属性中，定义一个函数，该函数处理ajax调用返回的数据并返回一个包含results数组的对象（就像您已经在构建的数据对象一样）。

然后，您可以重复使用模板功能。

这是带有随机API的有效代码段。请注意，查询的字词不会影响返回的数据。

$(document).ready(function () {

  $(".products-select2").select2({
    width: '100%',
    closeOnSelect: false,
    placeholder: '',
    minimumInputLength: 3,
    ajax: {
      url: "https://jsonplaceholder.typicode.com/users",
      dataType: 'json',
      delay: 250,
      data: function (query) {
        // add any default query here
        return query;
      },
      processResults: function (data) {
        // Tranforms the top-level key of the response object from 'items' to 'results'
        var results = [];
        data.forEach(e => {
          results.push({ id: e.id, text: e.name });
        });

        return {
          results: results
        };
      },
    },
    templateResult: formatResult
  });
  
  function formatResult(d) {
    if(d.loading) {
        return d.text;
    } 

    // Creating an option of each id and text
    $d = $('<option/>').attr({ 'value': d.value }).text(d.text);

    return $d;
}

});

<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js">
      </script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.js"></script>
  </head>
<body>

  <select name="filtre_products[]" class="form-control products-select2" multiple> 
  </select>

</body>
</html>

使用API的动态select2选项

2 个答案:

使用API​​的动态select2选项

2 个答案:

使用API的动态select2选项