MultiAutoComplete

open dropdown on mouse click

by Troy Taylor

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
  <h1>
    MultiAutoComplete
  </h1>
  <p>Open the dropdown by clicking on the MultiAutoComplete control</p>
  <div id="multiAutoComplete"></div>
</div>

JavaScript

onload = function() {

  // MultiAutoComplete
	var mac = new wijmo.input.MultiAutoComplete('#multiAutoComplete', {
  	placeholder: 'Select some countries',
    displayMemberPath: 'country',
    itemsSource: getData(),
    selectedIndex: -1
	});

	mac.addEventListener(mac.hostElement, 'click', function(){
  	console.log('click');
    // open dropdown if not already opened
    if(!mac.isDroppedDown){
    	mac.isDroppedDown = true;
    }
  });
  
	// 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 Marino', gdpm: 1558, popk: 31, gdpcap: 50258 },
			{ id: 14, country: 'Netherlands', gdpm: 750696, popk: 16937, gdpcap: 44322 },
			{ id: 15, country: 'United Kingdom', gdpm: 2858482, popk: 65110, gdpcap: 43902 },
			{ id: 16, country: 'Austria', gdpm: 374261, popk: 8621, gdpcap: 43412 },
			{ id: 17, country: 'Canada', gdpm: 1550537, popk: 35825, gdpcap: 43280 },
			{ id: 18, country: 'Finland', gdpm: 232077, popk: 5472, gdpcap: 42411 },
			{ id: 19,...