Demo - AutoComplete with Big Data

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    AutoComplete with Big Data
  </h1>

  <p>
    You can use the AutoComplete control to efficiently
    select items from long lists.</p>
  <p>
    This sample uses an AutoComplete to select strings
    from a list with 1,000,000 items. The control 
    shows a list with entries that match what the
    user types. The list is limited to a maximum of
    10 items.
  </p>
  <p>
    Try it by typing "1234" for example:
  </p>
  <div id="theAutoComplete"></div>
  
</div>

CSS

.wj-combobox {
  margin-bottom: 18px;
}

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

	var bigData = getData();
  
  // auto-complete showing up to 10 items
  var theAutoComplete = new wijmo.input.AutoComplete('#theAutoComplete', {
    maxItems: 10,
    itemsSourceFunction: function(query, max, callback) {
    alert('query value : ' + query);
    	var items = [];
      for (var i = 0; i < bigData.length && items.length < max; i++) {
      	if (!query || bigData[i].indexOf(query) > -1) {
        	items.push(bigData[i]);
        }
      }
			callback(items);
		}
	});

	// very large data set
  function getData() {
  	var data = [];
    for (var i = 0; i < 1000000; i++) {
    	if(i > 5)
      	data.push('A.B.C.' + i)
      else if(i > 8)
      	data.push('A+B+C.' + i)
      else 
      	data.push('item ' + i)
    }
    return data;
  }
}