JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="controller">
        <dl> <dt>Query</dt>

            <dd>
                <input type="text" placeholder="something" ng-model="queryPart.text" />
            </dd> <dt>Filter</dt>

            <dd>
                <input type="text" placeholder="something" ng-model="query" />
            </dd>
            <ul>
                <li class="repeated-item" ng-repeat="(key,thing) in things | objFilter:{query:queryPart,filter:{field:'type',text:query}}">{{key}} : {{thing.name}}</li>
            </ul>
            <p ng-bind="query"></p>
    </div>
</div>

CSS

.repeated-item{
    overflow:hidden !important;
}
/*
  We're using CSS transitions for when
  the enter and move events are triggered
  for the element that has the .repeated-item
  class
*/
.repeated-item.ng-enter, .repeated-item.ng-move {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  max-height:0;
}
 
/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
    max-height:20px;
}
 
/*
  We're using CSS keyframe animations for when
  the leave event is triggered for the element
  that has the .repeated-item class
*/
.repeated-item.ng-leave {
  -webkit-animation:1s my_animation;
  -moz-animation:1s my_animation;
  -o-animation:1s my_animation;
  animation:1s my_animation;
}
 
@keyframes my_animation {
  from { max-height:20px; }
  to { max-height:0; }
}
 
/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
  from { max-height:20px; }
  to { max-height:0; }
}
 
@-moz-keyframes my_animation {
  from { max-height:20; }
  to { max-height:0; }
}
 
@-o-keyframes my_animation {
  from { max-height:20; }
  to { max-height:0; }
}

JavaScript

'use strict';

angular.module('myApp', ['ngAnimate']).
filter('objFilter', function () {
    return function (input, dsl) {
        console.log(dsl);
        var out = {};
        var allowed = true;
        var queryRegex, filterRegex;
        if ( !! dsl.query) {
            queryRegex = new RegExp(dsl.query.text, 'i');
        }
        if ( !! dsl.filter) {
            filterRegex = new RegExp(dsl.filter.text, 'i');
        }
        for (var item in input) {
            allowed = true;
            allowed = allowed && (!dsl.filter || filterRegex.test(input[item][dsl.filter.field]));
            if ( !! dsl.query) {
                allowed = allowed && dsl.query.fields.reduce(function (pv, field) {
                    return pv || queryRegex.test(input[item][field]);
                }, false);
            }
            if (allowed) {
                out[item] = input[item];
            }
        }
        return out;
    }
});

/* Controllers */

function controller($scope) {
    $scope.query = '';
    $scope.thingsFilter = function (item, two) {
        console.log(item);
        return true;
    };
    $scope.pattern = {
        query: {
            fields: ['name','author'],
            text: ""
        },
        filter: {
            field: "type",
            text: ""
        }
    }
    $scope.queryPart = {
            fields: ['name','author'],
            text: ""
        };
    $scope.filterPart = {
            field: "type",
            text: ""
        };
    $scope.things2 = [{
        name: "Пиздец"
    }, {
        name: "Путин"
    }, {
        name: "Срань"
    }, {
        name: "хрень"
    }];
    $scope.things = {
        "one": {
            name: "Пиздец",
            type: "1",
            author: "Путин"
        },
            "two": {
            name: "Путин",
            type: "1",
            author: "Путин"
        },
            "three": {
            name: "Срань",
            type: "2",
            author: "пуй"
        },
    ...