https://petrabax.com/app/widgets/widget-autocomplete.directive.js

1(function () {
2    'use strict';
3
4    angular
5        .module('app.widgets')
6        .directive('widgetAutocomplete', widgetAutocomplete);
7
8    widgetAutocomplete.$inject = ['$timeout', 'common'];
9
10    function widgetAutocomplete($timeout, common) {
11
12        var directive = {
13            //require: 'ngModel',
14
15            scope: {},
16            bindToController: {
17                labelProp: '@',
18                valueProp: '@',
19                groupProp: '@',
20                minChars: '<',
21                rebindWhen: '<',
22                url: '@',
23                urlParams: '<',
24                suggestions: '=',
25                ngModel: '=',
26                val: '='
27            },
28
29            controller: controller,
30            controllerAs: "vm",
31
32
33            link: link
34        };
35
36        return directive;
37
38        function link(scope, element, attrs, vm) {
39
40            activate();
41
42            vm.$onChanges = function (bindings) {
43                var rebindWhen = (bindings.rebindWhen || {}).currentValue;
44
45                if (rebindWhen) {
46                    activate();
47                }
48            }
49

50            //////////////////
51            function activate() {
52
53                var labelProp = vm.labelProp || 'name';
54                var valueProp = vm.valueProp || 'code';
55                var groupProp = vm.groupProp || 'groupCode';
56
57                $timeout(function () {
58
59                    var settings = {
60                        minChars: vm.minChars || 3,
61                        lookup: vm.suggestions || [],
62                        onSelect: function (suggestion) {
63                            //ngModel.$setViewValue(suggestion.value);
64                            vm.ngModel = suggestion.value;
65                        }
66                    };
67                    
68                    if (vm.url) {
69                        var url = vm.url;
70                        
71                        if (vm.urlParams) {
72                            url = common.stringFormatWithObject(url, vm.urlParams);
73                        }
74
75
76                        settings = {
77                            serviceUrl: 'api/' + url,
78                            deferRequestBy: 250,
79                            minChars: vm.minChars || 3,
80                            groupBy: groupProp
81                        }
82                        settings.transformResult = function (response, originalQuery) {
83
84                            var resp = JSON.parse(response);
85                            var data = resp.data || [];
86
87                            var items = tjq.map(data, function (item) {
88                                return {
89                                    value: item[labelProp],
90                                    data: item
91                                }
92                            });
93
94                            return {
95                                suggestions: items
96                            }
97
98                        },
99                        settings.onSelect = function (suggestion) {
100
101                            scope.$apply(function () {
102                                vm.val = suggestion.data[valueProp];
103                                vm.ngModel = suggestion.value;
104                                //ngModel.$setViewValue(suggestion.value);
105                            });
106
107                        }
108
109                    }
110
111                    settings.showNoSuggestionNotice = true;
112                    settings.noSuggestionNotice = "--- No Results ---";
113
114
115                    element.autocomplete(settings);
116
117                    element
118                        .on('click', function () {
119                            this.select();
120                        })
121                        .on('keypress', function () {
122                            scope.$apply(function () {
123                                vm.val = '';
124                            });
125                        });
126
127
128                    //scope.$on('$destroy', function () {
129                    //    element.off('click');
130                    //});
131                });
132
133
134            }
135
136
137
138        }
139
140        function controller() {
141            var vm = this;
142        }
143
144    }
145
146
147}());