Question

我必须在一个包含8000多个项目的下拉列表中实现jquery select2。我尝试了可能的解决方案并卡在某处，实际上下拉有一些静态功能可以将所有项目都带到它。所以我想把所有项目都列在清单中。

var data = []; $("select[name='stock_id'] option").each(function(){ var value= $(this).val(); var txt = $(this).text(); data.push({id: ""+value, text: ""+txt}); });

data会将所有现有选项列表保留在其中。现在我想显示100，当用户向下滚动到最后。它将展开以显示另外100个项目。为此，我使用了lodash和代码

$("#_stock_id_edit").select2({
initSelection: function(element, callback) {
  var selection = _.find(data, function(metric){ 
  return metric.id === element.val();
})
callback(selection);
 },

query: function(options){
var pageSize = 100;
var startIndex  = (options.page - 1) * pageSize;
var filteredData = data;

if( options.term && options.term.length > 0 ){
  if( !options.context ){
    var term = options.term.toLowerCase();
    options.context = data.filter( function(metric){
      return ( metric.text.toLowerCase().indexOf(term) !== -1 );
    });
  }
  filteredData = options.context;
}

options.callback({
  context: filteredData,
  results: filteredData.slice(startIndex, startIndex + pageSize),
  more: (startIndex + pageSize) < filteredData.length
});
}
});

当我运行此代码时，它会显示一个空的下拉列表。这是我包含的东西。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>

这是小提琴链接 jsFiddle

注意：我的问题可能存在。但我的代码不同。请尝试在此代码中回答。另外我不能使用AJAX方法。所以请不要在这里建议我的AJAX事情。

使用大数据的jquery Select2无效

0 个答案: