JSFiddle - React, Tailwind, and code Playground

by Manish Gupta

HTML

<script src="http://cdn.wijmo.com/5.20152.70/interop/angular/wijmo.angular.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>
<script src="http://cdn.wijmo.com/5.20172.334/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
    
 <label>First DropDown</label>
  <wj-auto-complete style="width: 295px"
  					control="region"
                    show-Drop-Down-Button=true
                    items-source="countries"
                    selected-value-path="id"
                    selected-item="items"
                    placeholder="&nbsp;&nbsp;e.g. Region">
  </wj-auto-complete>
  <br><br>
  <label>Second DropDown</label>
  <input id="searchCompaniesCpy" type="text" placeholder="&nbsp;&nbsp;e.g. AAPL" style="width: 295px;">
  <br><br>
  <button type="button" class="btn btn-primary btn-small pull-right wj-hide-ok">Ok</button>
  <button type="button" class="btn btn-primary btn-small pull-right ">Cancel</button>
</div>

CSS

/* Header */
            #table_header_div1{
                /*pointer-events: none;*/
                cursor: pointer;
                /*max-height: 20px !important;*/
                background-color:#dadada !important;
            }
            div#searchCompanies_dropdown {
                width: 100%;
                max-width: 600px;
            }

            .fixed_header_table { /* <table> */
            }
            /*
            tbody tr .header{
                border: 1px solid black;
                font-weight:bold;
                text-align:center;
            }*/

            /* Data Cells fix this style only for company control */
            /*table :not(.fixed_header_table) {
                margin-bottom: 30px;
            }*/

            tbody tr .combo_data1 {
                text-align: left;
            }

            #customTable .company {
                width: 50%;
            }

            #customTable .ticker {
                width: 30%;
            }

            #customTable .miccode {
                width: 10%;
            }

            /*input.wj-form-control
            {
                min-height: 10px !important;
                width: 200px !important;
            }*/

JavaScript

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

// controller
app.controller('appCtrl', function ($scope) {
    // as an ICollectionView
   $scope.selectedRegionId=0;
   $scope.selectedcompany=null;
   var items = [];
   $scope.companies=[{'Company':"All",'Ticker':"all Ticker",'MicCode':"All"},
   										{'Company':"Pak",'Ticker':"006630",'MicCode':"1"},
                      {'Company':"Ind",'Ticker':"0553",'MicCode':"2"},
                      {'Company':"Chi",'Ticker':"air",'MicCode':"3"}];

     // as an array
    $scope.countries = ['Afghanistan', 'Albania', 'Algeria' ];
	var combobox = new wijmo.input.AutoComplete('#searchCompaniesCpy', {     
		itemsSource: $scope.companies,
		selectedValuePath:"MicCode",
		headerPath: 'Ticker',
		searchMemberPath:'Company',
		showDropDownButton: false,
   		selectedValue:$scope.selectedcompany,
		//gotFocus: gotfocusCompany.bind(this),
		lostFocus: lostfocusCompany.bind(this),
		selectedIndex: 0,
		selectedIndexChanged: CompanyChanged.bind(this)
	});
combobox.formatItem.addHandler(function (s, e) {
                        e.item.innerHTML = '<table id="customTable" style="width:100%;"><colgroup><col span="1" class="company"><col span="2" class="ticker"><col span="3" class="miccode"></colgroup><tr>' +
                        '<td class="combo_data1" >' + e.data.Company + '</td>' +
                        '<td class="combo_data1 " >' + e.data.Ticker + '</td>' +
                        '<td class="combo_data1 " >' + e.data.MicCode + '</td>' + '</tr></table>';

                        });
                        combobox.refresh();
                        combobox.isDroppedDownChanged.addHandler(function (s, e) {
                        addHeader(s);
                        });
                        window.onresize = function () {

                        addHeader(combobox);
                        }
                        function addHeader(s) {
                        if...