JSFiddle - React, Tailwind, and code Playground

by cmyworld

HTML

<body data-ng-app="InstantSearchModule" data-ng-controller="InstantSearchController">
    Search by :
    <select data-ng-model="selectedFilter" data-ng-options="item.displayText for item in filtersAvailable">
    </select><br />
    Operation :
    <select data-ng-model="selectedFilterBehavior" data-ng-options="item.displayText for item in filterBehaviorsAvailable">
    </select><br />
    Filter:<input type="text" data-ng-model="filterString" /><br />
    Final Operation : {{selectedFilter.description}} & {{selectedFilterBehavior.displayText}} behavior with Query :"{{filterString}}"
    <hr />
    <div data-ng-repeat="p in products|descriptionFilter:filterString|orderBy:'description.length'"
        title="{{selectedFilter.filterMethod}}">        
        <h4 style="margin-bottom: 5px">{{$index+1}}.&nbsp;{{p.name}}</h4>
        <div>
            {{p.description}}
            <button data-ng-repeat="t in p.tags|orderBy:'toString()'">{{t}}</button>
        </div>
    </div>

    <!-- Include AngularJS from Google's CDN -->
</body>

JavaScript

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

//FILTERS BEGIN
app.filter('descriptionFilter', function () {
    var filterFunction = function (data, filterBy) {
        if (filterBy == null || filterBy === '')
            return data;
        var filtered = [];
        var regExp = this.filterRegExp();
        angular.forEach(data, function (item) {
            if (item.description.match(regExp))
                filtered.push(item);
        });

        return filtered;
    };
    return filterFunction;
});

app.filter('tagFilter', function () {
    var tagFilter = function (data, filterBy) {
        if (filterBy == null || filterBy === '')
            return data;

        var filtered = [];
        var regExp = this.filterRegExp();

        debugger;
        angular.forEach(data, function (item) {
            var isMatching = false;
            angular.forEach(item.tags, function (t) {
                isMatching = isMatching || (t.match(regExp) != null);
            });

            if (isMatching)
                filtered.push(item);
        });

        return filtered;
    };

    return tagFilter;
});
// FILTERS END

var InstantSearchController=function ($scope) {
    var self = this;

    $scope.filtersAvailable = [
        {
            displayText: 'Tag',
            filterMethod: 'tagFilter',
            description: 'Filter by Tags'
        },
        {
            displayText: 'Description',
            filterMethod: 'descriptionFilter',
            description: 'Filter by description'
        }
    ];
    $scope.selectedFilter = $scope.filtersAvailable[1];

    $scope.filterBehaviorsAvailable = [
        {
            displayText: 'CONTAINS',
            regexPrefix: '',
            regexPostfix: ''
        },
            {
                displayText: 'STARTS WITH',
                regexPrefix: '^',
                regexPostfix: ''
            },
            {
                displayText: 'EQUALS',
                regexPrefix: '^',
         ...