Wijmo 5 - ComboBox, AutoComplete, ListBox

by Manish Gupta

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>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20172.334/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.input.min.js"></script>
<h1> ListBox</h1>

<h4>Choose a country using a <b>ListBox</b>:</h4>
<div id="theListBox" style="height:200px"></div>

CSS

.wj-listbox-item:not(.wj-state-selected)>.wj-alt-item{
  background-color:lightcoral;
  padding:3px 10px;
}
.wj-listbox-item:not(.wj-state-selected)>.wj-item{
    background-color:#fff;
    padding:3px 10px;
}
.wj-listbox-item:not(.wj-state-selected){
    padding:0!important;
}

JavaScript

$(document).ready(function () {
    // create ListBox
    var lb = new wijmo.input.ListBox('#theListBox', {
        itemsSource: getCountries(),
        isContentHtml:true,
        itemFormatter : customItemFormatter.bind(this)
    });
    lb.hostElement.addEventListener('click',function(e){
    console.dir(e.target);
    	if(e.target.tagName=="SPAN"){
        	console.log('Clicked');
        }    
    },true);
    function customItemFormatter(index, content) {
        if(content=="Algeria"){
        	content=""+content+"<span style='float:right;background-color:grey;padding:0 2px;cursor:pointer;'>X</span>";  
        }
        if(index%2!=0){
        	content="<div class='wj-item'>"+content+"</div>";
        }
        if(index%2==0){
        	content="<div class='wj-alt-item'>"+content+"</div>";
        }
        
    	return content;
  	}
});
 
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", 'Croatia',
            'Cuba', 'Curacao', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica',
            'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea',
            'Eritrea', 'Estonia', 'Ethiopia', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland',
            'France', 'French...