JSFiddle - React, Tailwind, and code Playground

by Manish Gupta

HTML

<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.70/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.70/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
     <br/>
    Wijmo ListBox
    <br/>
    <wj-list-box style="height: 230px; width: 314px; padding: 10px; cursor: pointer;"
                                         is-content-html=true                                     
                                         item-Formatter=CompanyGroupFormatter
                                         items-source="countries">
  </wj-list-box>
  <br><br>
  <wj-auto-complete style="width: 295px"
                    show-Drop-Down-Button=true
                    items-source="countries">
  </wj-auto-complete>
</div>

<!--http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg-->

CSS

/*.itemborderstyle {
            background-color: #DBE5F0 !important;
            border-radius: 5px !important;
            color: #333;
            padding: 5px;
            list-style-type: none;
        }
        .itemborderstyleCpy {
            background-color: #D8F0E5 !important;
            border-radius: 5px !important;
            color: #333;
            padding: 5px !important;
            list-style-type: none !important;
        }
 li.itemborderstyle:hover{ background-color: orange !important; }
.wj-listbox-item:not(.wj-state-selected):not(.wj-separator):hover {
    background-color: transparent !important;
}*/

.itemborderstyleCpy {
            background-color: #D8F0E5 !important;
    padding: 5px;
    list-style-type: none;
    /*background: #FFF;*/
    color: #333;
    border: 1px solid #aaa;
    border-radius: 5px !important;
        }
.itemborderstyle
{
    padding: 5px;
    list-style-type: none;
    /*background: #FFF;*/
    color: #333;
    border: 1px solid #aaa;
    border-radius: 5px !important;
    background-color: #dbe5f0 !important;
}
.wj-state-selected
{
    background-color: transparent !important;
}

li.itemborderstyle:hover
{color: #606c03; 
    background-color: #f90 !important;
}
.wj-listbox-item:not(.wj-state-selected):not(.wj-separator):hover
{
    background-color: transparent !important;
}

.wj-state-selected
{
    background-color: transparent !important;
}
.selectableImage {
                float: right;
                padding-top: 2px !important;
                margin-right: 2px;
                height:22px;
                width:22px;
                border: none !important;
            }

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {
    // as an ICollectionView
    var items = [];
     // as an array
    $scope.countries = [
        'Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antigua', 'Argentina', 'Armenia',
        'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize' ];
    for (var i = 0; i < $scope.countries.length; i++) {
        var c = $scope.countries[i];
        items.push({
            id: i,
            country: c,
            length: c.length,
            selected: i < 10 && (i % 3 == 0)
        });
    }
    $scope.CompanyGroupFormatter = function (index, content) {
           
            var greenItemStyle = '<li style="background-color:#DBE5F0;" class="itemborderstyle" ';
            if(index==0)
            {
           // alert(index)
             greenItemStyle = '<li style="background-color:#DBE5F0;" class="itemborderstyleCpy" ';            
            }
            var itemStyle = '<li class="itemborderstyle" id=';

            //  alert(index+' '+ content);    
            if (content.length > 0) {
                content = "" +
                    greenItemStyle +
                    $scope.selectedGroupId +
                    ' value=' +
                    content +
                    '>' +
                    '&nbsp;&nbsp;' 
                    +content +
                    '<img class="selectableImage" src="https://i.imgur.com/DRkJ3Xg.png" onclick="MyFunc();"/></li>' +
                    " </span>";
            } else {
                content = itemStyle +
                    $scope.selectedGroupId +
                    ' value=' +
                    content +
                    '>' +
                    '&nbsp;&nbsp;' 
                    +content +
                    '<img class="selectableImage"...