Динамические опции select2 с использованием API - PullRequest
Новая
       7

Динамические опции select2 с использованием API

0 голосов
/ 27 июня 2018

Я постараюсь объяснить мою проблему настолько, насколько смогу. Я пытаюсь создать с помощью плагина select2 способ, позволяющий пользователю написать несколько букв, и на каждой букве нажимается вызов API, который дает первые 20 результатов, полученных этим API.

Итак, у меня есть выбор 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> из опций и добавлять к ним динамически идентификаторы и тому подобное. Но в способе, которым я его создаю, он помещает опции INSIDE в теги <li>, а это не то, чего я хочу, я хочу, чтобы он воспринимал это как динамические опции, как он делает это без вызова запроса.

Некоторые источники документации для вас, ребята, это показывает часть того, что я пытаюсь сделать, но пример показывает, как показать результаты из того, что мы пишем, я хочу, чтобы это отображалось из API при каждом нажатии, и курс с добавлением множественного выбора: http://select2.github.io/select2/#data

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

Я прочитал документацию и обнаружил, что поддержка ajax , кажется, соответствует вашим потребностям.

В ваш объект параметров 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>
0 голосов
/ 30 июня 2018

Для вашего успешного вызова 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
                    }));
                }
            }
...