Search Input Directive

I was asked to create reuse component for free text filter that will be use in several different pages.

The requirements:

1. Add prefix to special characters
2. Make the input not valid when the number of occurrences of apostrophes is odd

Two requirements were to prevent exceptions in the server.

I created two directives:

double apostrophes directive
This directive make the value of the input valid in case the number of occurrences of apostrophes is even or invalid when it odd. Check using the regular expression the number of occurrences and then set it valid or not.

I’d like to mention that the directive has only behavior and doesn’t have template .

See code below:

export function DoubleApostrophesDirective() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.doubleApostrophes = function(modelValue, viewValue) {
                if (ctrl.$isEmpty(modelValue)) {
                    // consider empty models to be valid
                    return true;
                }

                let numOfApostrophes = (viewValue.match(/\"/g) || []).length;

                if(numOfApostrophes % 2 === 0){
                    return true;
                }else{
                    return false;
                }
            };
        },
        restrict: 'A'
    }
}

you can see reference custom validation (search custom validation)

Later I’ll show example how to use the directive.

Search Input Directive

This directive envelope an ‘input’ tag into form in order to use the validation mechanism, the directive first check if the value is valid or not using the ‘double apostrophes directive’ that I mention before (you can use any validation )  and then in case the value is valid add prefix to value using another utility.

export function SearchInputDirective(){
    return{
        scope: {
            placeholder: '@',
            onValidClick: '&'
        },
        restrict: 'E',
        transclude: true,
        templateUrl: '/app/js/common-ui/search-input/search-input.template.html',
        controller: 'searchInputController',
        controllerAs: 'searchInputVM',
        bindToController: true
    }
}

export class SearchInputController{
    constructor(addBackSlashToSpecialCharactersUtil, $timeout){
        this.addBackSlashToSpecialCharactersUtil = addBackSlashToSpecialCharactersUtil;
        this.$timeout = $timeout;

        this._timeout;
    }

    action(){
        if(this.searchForm.$valid) {
            let validStr = this.addBackSlashToSpecialCharactersUtil(this.search);
            this.onValidClick({
                validStr: validStr,
                originalQueryText: this.search
            });
        }
    }

    onMagnifierClick(){
        this.action();
    }


    onSearchInputKeyUp($event){

        if(this._timeout){ //if there is already a timeout in process cancel it
            this.$timeout.cancel(this._timeout);
        }

        this._timeout = this.$timeout(() =>{

            if($event){
                if(!this.searchForm.$valid) {
                    $($event.target).blur();
                }
                this.action();
            }

            this._timeout = null;
        },500);
    }   
}

example how to use the double apostrophes directive