Select2: почему скопированный код не работает? - PullRequest
Новая
       10

Select2: почему скопированный код не работает?

0 голосов
/ 21 ноября 2018

У меня есть 10.000 строк данных для загрузки в select.улучшить производительность я думал, чтобы загрузить их с помощью конструктора «запрос».Я хотел начать с примера «e5» (Загрузка данных) на странице документации.Я также добавил демонстрации всех «e10» - «Загрузка данных массива»

За исключением первого элемента «e10», все остальные не работают.Кто может мне помочь ?Где я не прав? 

$(document).ready(function() {
  $("#e5").select2({
    minimumInputLength: 1,
    query: function(query) {
      var data = { results: [] },
        i, j, s;
        
      for (i = 1; i < 5; i++) {
        s = "";
        for (j = 0; j < i; j++) { s = s + query.term; }
        data.results.push({ id: query.term + i, text: s });
      }

      query.callback(data);
    }
  });

  $("#e10").select2({
    theme: "classic",
    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}],
  });

  var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];

  function format(item) { return item.tag; }

  $("#e10_2").select2({
    data: { results: data, text: 'tag' },
    formatSelection: format,
    formatResult: format,
    theme: "classic"
  });

  $("#e10_3").select2({
    data: { results: data, text: function(item) { return item.tag; } },
    formatSelection: format,
    formatResult: format,
    theme: "classic"
  });
  
  $("#e10_4").select2({
    data: function() { return { text: 'tag', results: data }; },
    formatSelection: format,
    formatResult: format,
    theme: "classic"
  });
});
<link href="http://www.digitalenetwork.it/select2test/css/select2.css" rel="stylesheet" />
<script src="http://www.digitalenetwork.it/select2test/js/jquery-3.3.1.min.js"></script>
<script src="http://www.digitalenetwork.it/select2test/js/select2.full.min.js"></script>

<div>
  <div>
    <div>
      <label for="e5">e5</label>
      <div><input id="e5" name="e5" type="hidden" style="width:100%"></div>
    </div>
    <div>
      <label for="e10">e10</label>
      <div><input type="hidden" id="e10" style="width:100%" /></div>
    </div>
    <div>
      <label for="e10_2">e10_2</label>
      <div><input type="hidden" id="e10_2" style="width:100%" /></div>
    </div>
    <div>
      <label for="e10_3">e10_3</label>
      <div><input type="hidden" id="e10_3" style="width:100%" /></div>
    </div>
    <div>
      <label for="e10_4">e10_4</label>
      <div><input type="hidden" id="e10_4" style="width:100%" /></div>
    </div>
  </div>
</div>
...