JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div ng-app="myApp">
    <div ng-controller="controller">
        <dl> <dt>Query</dt>

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

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

JavaScript

'use strict';

angular.module('myApp', []).
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.things2 = [{
        name: "Пиздец"
    }, {
        name: "Путин"
    }, {
        name: "Срань"
    }, {
        name: "хрень"
    }];
    $scope.things = {
        "one": {
            name: "Пиздец",
            type: "1",
            author: "Путин"
        },
            "two": {
            name: "Путин",
            type: "1",
            author: "Путин"
        },
            "three": {
            name: "Срань",
            type: "2",
            author: "пуй"
        },
            "four": {
            name: "хрень",
            type: "2",
            author: "Путин"
        }
    };
}