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

Question

我有一个在搜索框中显示数据的功能，我用的是Select2，功能还可以，但是想在搜索框中查看数据时速度很慢，即使我想点击一个数据。

为了您的信息，我使用 Select2 和一个大表（> 20 000 个条目）。如何解决此问题以避免数据显示时间？

    <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");

标签： javascriptjqueryjquery-select2