JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <input filter-select options="items" key="label" model="selected" dropdown-class="dropdown" input-class="input" option-class="option" option-selected-class="option-selected" initial-value="" allow-empty="true">
        <input filter-select options="items" key="value" model="selected" dropdown-class="dropdown" input-class="input" option-class="option" option-selected-class="option-selected" initial-value="" allow-empty="false">{{ selected }}</div>
</div>

CSS

.dropdown {
    background-color:white;
    border: rgb(169, 169, 169) solid 1px;
    border-top: none;
    max-height:100px;
    overflow: auto;
}
.input {
    width:100%;
}
.option:hover, .option-selected {
    background-color:green;
    color:white;
}
.option {
    padding:3px;
}

JavaScript

(function () {
    'use strict';
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope) {
        $scope.items = [{
            label: 'Alpha',
            value: 'A'
        }, {
            label: 'Bravo',
            value: 'B'
        }, {
            label: 'Charlie',
            value: 'C'
        }, {
            label: 'Delta',
            value: 'D'
        }, {
            label: 'Echo',
            value: 'E'
        }];
    });
  app.directive('filterSelect', ['$filter', '$document', '$timeout', function ($filter, $document, $timeout) {
    return {
      replace: 'true',
      scope: {
        options: '=',
        model: '=',
        initialValue: '=',
        inputClass: '@',
        dropdownClass: '@',
        optionClass: '@',
        optionSelectedClass: '@',
        key: '@',
        allowEmpty: '@'
      },
      template: '<div ng-mouseleave="mouseleft=true" ng-mouseenter="mouseleft=false;keyboardPointer=-1;"><input ng-keydown="keydown($event)" ng-focus="focus()" ng-blur="blur()" class="{{inputClass}}" type="text" ng-model="filterText"><div ng-show="booleanShow" class="{{dropdownClass}}"><div ng-class="getClassEmpty()" ng-if="allowEmpty" ng-click="select()"class="{{optionClass}}">Please Select...</div><div ng-class="getClass(opt)" ng-mouseover="mouseover(opt)" ng-repeat="opt in filteredOptions" class="{{optionClass}}" ng-click="select(opt)" ng-bind="opt[key]"></div></div></div>',
      controller: ['$scope', function ($scope) {
        $scope.pointingClass = 'keyboard-pointing' + (Math.random() * 1000000 >>> 1);
        $scope.scrollTo = function (dropdownEl) {
          angular.forEach(dropdownEl.children(), function (v, k) {
            if (angular.element(v).hasClass($scope.pointingClass)) {
              if ((v.offsetTop + v.offsetHeight) - dropdownEl[0].scrollTop > dropdownEl[0].offsetHeight) {
                dropdownEl[0].scrollTop = (v.offsetTop + v.offsetHeight) - dropdownEl[0].offsetHeight;
 ...