Wijmo5 - Basic Grid Sample

by Ross Dederer

HTML

<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.26/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.gauge.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.26/styles/themes/wijmo.theme.modern.min.css">
<div>
  <label>itemsSource Only</label>
  <div id="acAutoComplete1"></div>
</div>
<div>
  <label>itemsSource &amp; cssMatch</label>
  <div id="acAutoComplete2"></div>
</div>

CSS

.highlight {
  background-color: #ff0;
  color: #000;
}
.wj-input-group-btn {
  color: red;
}

JavaScript

var autoComplete1 = new wijmo.input.AutoComplete('#acAutoComplete1');
var autoComplete2 = new wijmo.input.AutoComplete('#acAutoComplete2');
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');

autoComplete1.itemsSource = countries;

autoComplete2.itemsSource = countries;
autoComplete2.cssMatch = 'highlight';   // CSS class for custom highlighting