Demo - MultiAutoComplete

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>
    MultiAutoComplete
  </h1>

  <p>
    The MultiAutoComplete control is similar to the MultiSelect.
    Both controls allow users to select multiple items from lists.
    The main differences between the two are:</p>
  <ul>
    <li>
      The MultiAutoComplete shows a drop-down that includes only
      items that match the current input (like the AutoComplete).</li>
    <li>
      The MultiAutoComplete shows all the items that are currently
      selected, and allows users to remove items by clicking them on
      the list.</li>
    <li>
      The MultiAutoComplete exposes the list of selected items through
      the <b>selectedItems</b> property (the MultiSelect uses 
      <b>checkedItems</b> instead).</li>
  </ul>
  <p>
    For example, try typing "land" or "uni":
  </p>
  <div class="row">
    <div class="col-xs-6">
      <div id="theMultiAutoComplete"></div>
    </div>
    <div class="col-xs-6">
      <p>
        <b>Selected Items:</b>
      </p>
      <ul id="selectedItems">
      </ul>
    </div>
  </div>
</div>

CSS

.wj-dropdown {
  margin-bottom: 18px;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	var firstItem = [];

  // MultiAutoComplete
	var theMultiAutoComplete = new wijmo.input.MultiAutoComplete('#theMultiAutoComplete', {
  	placeholder: 'Select some countries',
    displayMemberPath: 'country',
    itemsSource: getData(),
    selectedIndex: -1, // start empty
    selectedItemsChanged: function (s, e) {
    	var arr = s.selectedItems,
      	  html = '';
      for (var i = 0; i < arr.length; i++) {
      	html += wijmo.format('<li>{country}</li>', arr[i]);
      }
      document.getElementById('selectedItems').innerHTML = html;
		},
    isDroppedDownChanged: function(s, e) {
    	if (s.isDroppedDown) { //add selected style when the dropdown is open                
        setTimeout(function(){
          firstItem.push(s.listBox.collectionView.items[0]);
        },0);
      }
    },
    lostFocus: function(s,e) {
      s.selectedItems = firstItem;
    }
	});

	// list of country GDP and populations
  // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP
  function getData() {
	  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: 295091, popk: 5660, gdpcap: 52136 },
			{ id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 },
			{ id: 11, country: 'Iceland', gdpm: 16718, popk: 333, gdpcap: 50204 },
			{ id: 12, country: 'Sweden', gdpm: 493042, popk: 9851, gdpcap: 50049 },
			{ id: 13, country: 'San...