Demo - AutoComplete

by Joel Parks

HTML

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

  <h1>
    AutoComplete: selectedIndexChanged
  </h1>

  <p>
    The AutoComplete control extends the ComboBox, and
    both provide a selectedIndexChanged event.
    Changes will be shown in the console.</p>
  <label for="theAutoComplete">AutoComplete:</label>
  <div id="theAutoComplete"></div>
  <br/>
  <label for="theCombo">ComboBox:</label>
  <div id="theCombo"></div>
</div>

CSS

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

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

  var theCombo = new wijmo.input.ComboBox('#theCombo', {
  	selectedIndexChanged: function(s, e) {
    	var item = s.collectionView.currentItem;
    	console.log('ComboBox selectedIndex:', s.selectedIndex, 'country:', item ? item.country : 'none');
		},
    displayMemberPath: 'country',
    itemsSource: getData()
	});
  var theAutoComplete = new wijmo.input.AutoComplete('#theAutoComplete', {
  	selectedIndexChanged: function(s, e) {
    	var item = s.collectionView.currentItem;
    	console.log('AutoComplete selectedIndex:', s.selectedIndex, 'country:', item ? item.country : 'none');
    },
		isDroppedDownChanged: function(s, e) {
			if(s.isDroppedDown) {
				document.getElementsByClassName('wj-listbox')[0].addEventListener("scroll", scrollFunction());
			}
		},
    displayMemberPath: 'country',
    itemsSource: getData(),
		maxItems: 12
	});
	
	function scrollFunction() {
		console.log('Scrolling');
	}

	// list of country GDP and populations
  // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP
  function getData() {
		var bigData = [];
		var countries = 'US,UK,China,Germany,Japan,Israel,Palestine,Spain,Greece,Russia,South Korea, Uzbekistan'.split(',');
		for(var i = 0; i < 30; i++){
			bigData.push({country: countries[i % countries.length]});
		}
		return bigData;
	  /*return [
			{ id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 },
			{ id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 },
			{ id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 },
			{ id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 },
			{ id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 },
			{ id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 },
			{ id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 },
			{ id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 },
			{ id: 9, country: 'Denmark', gdpm:...