JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section ng-app="filterDemo">
    <div ng-controller="SampleCtrl">
        <input type="text" ng-model="portFilter" placeholder="Filter..." />
        <input type="text" ng-model="cssFilter" placeholder="CSS Filter..." />
        <div class="locations" css-filter="cssFilter">
            <section class="portList">
                <div class="location" ng-repeat="port in origins | filter:portFilter" filterValue="{{port.code}},{{port.description}}"> <a href="#{{port.code}}" class="port">{{port.code}}</a>

                </div>
            </section>
            <section class="portList">
                <div class="location" ng-repeat="lane in lanes | filter:portFilter" filterValue="{{lane.origin.code}}-{{lane.destination.code}},{{lane.origin.description}},{{lane.destination.description}}"> <a href="#{{lane.origin.code}}-{{lane.destination.code}}" class="port">{{lane.origin.code}}-{{lane.destination.code}}</a>

                </div>
            </section>
            <section class="portList">
                <div class="location" ng-repeat="port in destinations | filter:portFilter" filterValue="{{port.code}},{{port.description}}"> <a href="#{{port.code}}" class="port">{{port.code}}</a>

                </div>
            </section>
        </div>
    </div>
</section>

CSS

div.location {
    display: inline-block;
    width: 85px;
}
.portList {
    display: inline-block;
    vertical-align: top;
    width: 250px;
}
.locations {
    vertical-align: top;
}
.hide {
    display: none !important;
    border: 1px solid red;
}
}

JavaScript

var module = angular.module('filterDemo', []);

module.directive('cssFilter', function () {
    return {
        link: function (scope, element, attributes) {
            scope.$watch(attributes.cssFilter, function (value) {
                var re = new RegExp(escapeRegExp(value || ''), 'i');

                angular.forEach(element.find("*"), function (item) {
                    var filterValue = item.attributes['filterValue'];
                    if (!(filterValue && filterValue.value)) {
                        return;
                    }
                    filterValue = filterValue.value;

                    if (re.test(filterValue)) {
                        angular.element(item).removeClass('hide');
                    } else {
                        angular.element(item).addClass('hide');
                    }
                });
            });
        }
    }
});


module.controller('SampleCtrl', function ($scope) {
    $scope.origins = randomPorts(10);
    $scope.destinations = randomPorts(40);

    $scope.lanes = [];
    angular.forEach($scope.origins, function (o) {
        angular.forEach($scope.destinations, function (d) {
            $scope.lanes.push({
                origin: o,
                destination: d
            });
        });
    });

});

function escapeRegExp(str) {
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

function randomPorts(count) {
    var ports = [],
        alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (var i = 0; i < count; i++) {
        var code = "";
        for (var c = 0; c < 3; c++) {
            code += alpha[Math.floor(Math.random() * 26)];
        }
        ports.push({
            code: code,
            description: code[0] + "port" + code[1] + code[2]
        });
    }
    return ports;
}