iEat2/web/js/searchBar.js

/**
 * A text field which calls a function whenever the input value changes.
 */
(function() {
    (function() {
        try {return angular.module('ieat.ui')}
        catch {return angular.module('ieat.ui', [])}}
    )().component('searchBar', {
        templateUrl: 'static/templates/searchBar.html',
        bindings: {
            /* Sets default value to search */
            defaultValue: '@',
            /* Minimum query length before search is called */
            minLength: '<',
            /* Delay before search function is called */
            delay: '<',
            /* Function to call when search value changes */
            onChange: '&'
        },
        controller: ['$scope', '$timeout', function($scope, $timeout) {
            var self = this;
            this.$onInit = function() {
                self.searchTerm = self.defaultValue || "";
                self.minLength = self.minLength     || 3;
                self.delay = self.delay             || 10;
            };
            var searchTimeout = false;
            var lastSearch = null;
            var submitChange = function() {
                // Only callback if defined and something changed
                // Timeout/min length may have cause change to be undone
                if (self.onChange && lastSearch != self.searchTerm) {
                    lastSearch = self.searchTerm;
                    self.onChange({searchTerm: self.searchTerm});
                }
            };
            $scope.$watchGroup([function() {
                return self.searchTerm;
            }], function(newValues, oldValues) {
                if (searchTimeout)
                {
                    $timeout.cancel(searchTimeout);
                }
                if (self.searchTerm.length >= self.minLength)
                {
                    searchTimeout = $timeout(submitChange, self.delay);
                }
            });
        }]
    });
})();