JSFiddle - React, Tailwind, and code Playground

by Nakul Kundra

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.4/select2.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.4/select2.min.js"></script>
<p>search for tac or t&aacute;c</p>
<input type="hidden" value="10" >

CSS

.select2-container{
    width: 200px;
}

JavaScript

var data = [];
var tac = 'tac';

for(var i = 0; i < 1000000; i++){
    data.push({id: ""+i, text: ""+tac+i});
    tac = (tac=='tac')?'tác':'tac';
}

$("input").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;
    var stripDiacritics = window.Select2.util.stripDiacritics;

    if( options.term && options.term.length > 0 ){
      if( !options.context ){
        var term = stripDiacritics(options.term.toLowerCase());
        options.context = data.filter( function(metric){
          //since data is very big... save the stripDiacritics result for later
          //to speed up next search.
          //this does modify the original array!
          if ( !metric.stripped_text ) {
            metric.stripped_text = stripDiacritics(metric.text.toLowerCase());
          }
          return (metric.stripped_text.indexOf(term) !== -1);
        });
      }
      filteredData = options.context;
    }

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