Javascript 使用Select2优化搜索中的数据加载

我有一个在搜索框中显示数据的功能，我使用了Select2，该功能很好，但当我想在搜索框中查看数据时，即使我想单击数据，该功能也很慢

请参考，我使用Select2和一个大表（>20000个条目）。 如何解决此问题以避免数据显示时间

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/i18n/fr.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script> 
.
.
function loadJson(error,values, select2Data){
root = values;
var select2_data = select2Data; // select2Data contains 22500 lines

root.x0 = height / 6;
root.y0 = 0;
_callerNode=root;
root.children.forEach(collapse);
tracePathAndNode(root);

var query = {}

$("#search").select2({
     templateResult: function (item) {

         var term = query.term || '';
           if ( term=='') return item.text;

           if (item.loading) {
              return item.text;
            }          
       return markMatch(item.text, term);
          }
    , language: "fr"
    ,  language: {      
        searching: function (params) {
            // Intercept the query as it is happening
            query = params;                          
            return 'Searching…';
          }
        }
    ,placeholder: "Zone de recherche"
    ,data: select2_data
,width: '100%'
});
}

function markMatch (text, term) {   
      // Find where the match is
  var match = text.toUpperCase().indexOf(term.toUpperCase());
  var $result = $('<span></span>');
  // If there is no match, move on
  if (match < 0) {
    return $result.text(text);
  }
  // Put in whatever text is before the match
  $result.text(text.substring(0, match));
  // Mark the match
  var $match = $('<span class="select2-rendered__match"></span>');
  $match.text(text.substring(match, match + term.length));
  // Append the matching text
  $result.append($match);
  // Put in whatever is after the match
  $result.append(text.substring(match + term.length));  
  return $result;
}
.
.
function searchTree(obj,search,path){   
        var newSearch = search.replace(/ *\[ Resp:[^)]*\] */g, "");
        var newSearch1 = search.replace(/ *\( [^)]*\) */g, "");     
        if(obj.desc === newSearch && newSearch1){ 
            path.push(obj);
            return path;
        }
        else if(obj.children || obj._children){ 
            var children = (obj.children) ? obj.children : obj._children;
            for(var i=0;i<children.length;i++){
                path.push(obj);
                var found = searchTree(children[i],newSearch && newSearch1,path);
                if(found){
                    return found;
                }
                else{ path.pop();}
            }
        }
        else{ return false;}
    }


var allRhJson;
var select2_data_all;
var currentTypeSelection='ALL';

// loader settings
var opts = {
  lines: 9, // The number of lines to draw
  length: 9, // The length of each line
  width: 5, // The line thickness
  radius: 14, // The radius of the inner circle
  color: '#EE3124', // #rgb or #rrggbb or array of colors
  speed: 1.9, // Rounds per second
  trail: 40, // Afterglow percentage
  className: 'spinner', // The CSS class to assign to the spinner
};

var target = document.getElementById("tree-container");
var spinner = new Spinner(opts).spin(target);

d3.json("getJson.jsp?dataType=rh", function(data) { 
     spinner.stop();     
     allRhJson=data;         
     select2_data_all = extract_select2_data(allRhJson,[],0)[1];
     loadJson(null,allRhJson, select2_data_all ) ;
});

    $("#search").on("select2:select", function(e) {     
             var data = e.params.data.text;     
        var paths = searchTree(root,data,[]);       
        if(typeof(paths) !== "undefined"){
            openPaths(paths);
        }
        else{
            alert(data+" auncun résultat!");
        }
    })  
    d3.select(self.frameElement).style("height", "800px");

.
.
函数loadJson（错误、值、select2Data）{
根=值；
var select2_data=select2Data；//select2Data包含22500行
root.x0=高度/6；
root.y0=0；
_callerNode=根；
根。子。forEach（塌陷）；
tracePathAndNode（根）；
变量查询={}
$（“#搜索”）。选择2({
templateResult:函数（项）{
var-term=query.term | |“”；
if（term=''）返回item.text；
如果（项目装载）{
返回item.text；
}          
返回markMatch（item.text，term）；
}
，语文：“fr”
，语文：{
搜索：函数（参数）{
//在查询发生时拦截查询
query=params；
返回“搜索…”；
}
}
，占位符：“回收区”
，数据：选择2\u数据
，宽度：“100%”
});
}
函数标记匹配（文本，术语）{
//找到火柴在哪里
var match=text.toUpperCase（）.indexOf（term.toUpperCase（））；
变量$result=$（''）；
//如果没有对手，继续前进
如果（匹配<0）{
返回$result.text（text）；
}
//在比赛前输入任何文本
$result.text（text.substring（0，匹配））；
//标记比赛
变量$match=$（''）；
$match.text（text.substring（match，match+term.length））；
//附加匹配的文本
$result.append（$match）；
//比赛结束后把所有的东西都放进去
$result.append（text.substring（match+term.length））；
返回$result；
}
.
.
函数搜索树（obj，搜索，路径）{
var newSearch=search.replace（/*\[Resp:[^]*\]*/g，”）；
var newSearch1=search.replace（/*\（[^）]*\）*/g，“”；
如果（obj.desc==newSearch&&newSearch 1）{
路径推送（obj）；
返回路径；
}
else如果（obj.children | | obj._children）{
变量children=（obj.children）？obj.children:obj.\u children；
对于（var i=0；我尝试这个插件，@PraneshJanarthanan，than'ks来回答这个问题，但是你的例子不同，或者没有？！你可以根据需要定制这个插件。我做了这个例子，并且可以工作，但是同样的问题，在下拉列表中显示数据需要很长时间（>15秒）尝试使用延迟加载概念检查这个演示：