JSFiddle - React, Tailwind, and code Playground

by Farhat Ullah

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<body ng-app="app" ng-controller="appCtrl">
    <br />
    <br />
    <wj-auto-complete selected-index="selectedIndexCombo" selected-item="selectedAirline" items-source="countries" ng-class="clss" is-editable="true" got-focus="gotFocus(s,e)" lost-focus="lostFocus(s,e)" placeholder="country" show-Drop-Down-Button=false></wj-auto-complete>
    <br />Selected Item is : {{selectedAirline}}
    <br /> <br />
    <input type="button" ng-click="setItem()" value="Reload" />
</body>

CSS

.wj-input-group-btn:last-child>.wj-btn {
    border-left-width: 0px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    }
    .wj-state-collapsed{
      
    }

JavaScript

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

   // controller
   app.controller('appCtrl', function ($scope) {

       //  $scope.countries = [
       // list of countries to select from

       var initialList = [
           'Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla'];

       var reloading = ['Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya'];
       $scope.countries = initialList;
       $scope.selectedAirline = '';
       $scope.setItem = function () {
           $scope.countries = reloading;
           $scope.selectedAirline = 'Yemen';
       }
       $scope.gotFocus = function (s, e) {
             //alert('Message');
             s.isDroppedDown=true;
             s.showDropDownButton=true; 
             $scope.clss=''
             $scope.autoComplete.text = "true";
            };
            $scope.lostFocus = function (s, e) {
            // alert('MessageLost');
             s.showDropDownButton=false;
            };
   });