Wijmo 5 - ComboBox, AutoComplete, ListBox
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<h1>ComboBox, AutoComplete, ListBox</h1>
<h4>Choose a country using a <b>ComboBox</b>:</h4>
<div id="theCombo"></div>
<p></p>
<h4>Choose a country using an <b>AutoComplete</b>:</h4>
<div id="theAutoComplete"></div>
<p></p>
<h4>Choose a country using a <b>ListBox</b>:</h4>
<div id="theListBox" style="height:200px"></div>
<h4>Create a <b>ComboBox</b> from a <select> element:</h4>
<select id="theComboSelect">
<option>Austria</option>
<option>Belgium</option>
<option selected>Canada</option>
<option>Denmark</option>
<option>Egypt</option>
</select>
JavaScript
$(document).ready(function () {
var cmbVar;
// create ComboBox
var cmb = new wijmo.input.ComboBox('#theCombo', {
itemsSource: getCountries(),
placeholder: 'select a country',
//isEditable: true,
isDroppedDown: true,
onTextChanged: function() {
if(cmb.text.length > 1 && checkForDupes()){
cmb.selectedIndex = cmbVar + 1;
}
cmbVar = cmb.selectedIndex;
}
});
// create AutoComplete
var ac = new wijmo.input.AutoComplete('#theAutoComplete', {
itemsSource: getCountries(),
placeholder: 'select a country'
});
// create ListBox
var lb = new wijmo.input.ListBox('#theListBox', {
itemsSource: getCountries()
});
// create (and populate) ComboBox from <select> element
var cbs = new wijmo.input.ComboBox('#theComboSelect');
function checkForDupes(){
var firstChar = cmb.text[0].toLowerCase();
for(var i = 1; i < cmb.text.length; i++){
if(firstChar !== cmb.text[i].toLowerCase()){
return false;
}
}
return true;
}
// list of countries to select from
function getCountries() {
return [
'Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla',
'Antigua', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan',
'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize',
'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bonaire', 'Bosnia', 'Botswana', 'Brazil',
'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada',
'Canary Islands', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad',
'Channel Islands', 'Chile', 'China', 'Christmas Island', 'Cocos Island', 'Colombia',
'Comoros', 'Congo', 'Cook Islands', 'Costa Rica', "Cote D'Ivoire",...