Demo - ComboBox

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

  <p>
    The ComboBox combines an input element with a drop-down
    list. You can use it to select and/or edit strings or
    objects from lists.</p>
  <p>
    The ComboBox provides as-you-type auto-completion,
    making it easy to find items in long lists.</p>
  <p>
    For example, the combo boxes below allow you to 
    select from lists of strings and objects:</p>
  <label for="theComboString">Strings:</label>
  <div id="theComboString"></div>
  <p>
    The current value is: <b id="theComboStringCurrent"></b>.
  </p>
  <label for="theComboObject">Strings:</label>
  <div id="theComboObject"></div>
  <p>
    The current value is: <b id="theComboObjectCurrent"></b>.
  </p>
</div>

CSS

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

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'China,Germany,Greece,Italy,Japan,Portugal,Russia,Spain,UK,US'.split(','),
    data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      active: i % 5 != 0,
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

  // select a country (string)
  var theComboString = new wijmo.input.ComboBox('#theComboString', {
    textChanged: function(s, e) {
    	setText('theComboStringCurrent', s.text);
    },
    itemsSource: countries
	});
  
  // select an item (object)
  var theComboObject = new wijmo.input.ComboBox('#theComboObject', {
    selectedIndexChanged: function(s, e) {
    	var text = wijmo.format('{country} (sales: {sales:c0}, expenses {expenses:c0})', s.selectedValue);
    	setText('theComboObjectCurrent', text);
    },
    displayMemberPath: 'country',
    itemsSource: data
	});

	// show text in an element on the page
  function setText(id, value) {
  	document.getElementById(id).textContent = value;
  }
}