https://buy.probusinsurance.com/Scripts/Angular/Components/multiple-select.js

1
2angular.module("templates", []).run(["$templateCache", function ($templateCache) {
3    $templateCache.put("multiple-autocomplete-tpl.html",
4            "<div class=\"ng-ms form-item-container input-setting\">\r\n    <ul class=\"list-inline\">\r\n        <li ng-repeat=\"item in modelArr\">\r\n			<span ng-if=\"objectProperty == undefined || objectProperty == \'\'\">\r\n				{{item}} <span class=\"remove\" ng-click=\"removeAddedValues(item)\">\r\n                <i class=\"glyphicon glyphicon-remove\"></i></span>&nbsp;\r\n			</span>\r\n            <span ng-if=\"objectProperty != undefined && objectProperty != \'\'\">\r\n				{{item[objectProperty]}} <span class=\"remove\" ng-click=\"removeAddedValues(item)\">\r\n                <i class=\"glyphicon glyphicon-remove\"></i></span>&nbsp;\r\n			</span>\r\n        </li>\r\n        <li>\r\n            <input name=\"{{name}}\" ng-model=\"inputValue\" placeholder=\"\" ng-keydown=\"keyParser($event)\"\r\n                   err-msg-required=\"{{errMsgRequired}}\"\r\n                   ng-focus=\"onFocus()\" ng-blur=\"onBlur()\" ng-required=\"!modelArr.length && isRequired\"\r\n                    ng-change=\"onChange()\">\r\n        </li>\r\n    </ul>\r\n</div>\r\n<div class=\"autocomplete-list\" ng-show=\"isFocused || isHover\" ng-mouseenter=\"onMouseEnter()\" ng-mouseleave=\"onMouseLeave()\">\r\n    <ul ng-if=\"objectProperty == undefined || objectProperty == \'\'\">\r\n        <li ng-class=\"{\'autocomplete-active\' : selectedItemIndex == $index}\"\r\n            ng-repeat=\"suggestion in suggestionsArr | filter : inputValue | filter : alreadyAddedValues\"\r\n            ng-click=\"onSuggestedItemsClick(suggestion)\" ng-mouseenter=\"mouseEnterOnItem($index)\">\r\n            {{suggestion}}\r\n        </li>\r\n    </ul>\r\n    <ul ng-if=\"objectProperty != undefined && objectProperty != \'\'\">\r\n        <li ng-class=\"{\'autocomplete-active\' : selectedItemIndex == $index}\"\r\n            ng-repeat=\"suggestion in suggestionsArr | filter : inputValue | filter : alreadyAddedValues\"\r\n            ng-click=\"onSuggestedItemsClick(suggestion)\" ng-mouseenter=\"mouseEnterOnItem($index)\">\r\n            {{suggestion[objectProperty]}}\r\n        </li>\r\n    </ul>\r\n</div>");
5}]);
6(function () {
7    angular.module('multipleSelect', ['templates']).config(function () { });

8})();
9(function () {
10    angular.module('multipleSelect').directive('multipleAutocomplete', ['$filter', '$http', '$localStorage', '$sessionStorage', function ($filter, $http, $localStorage, $sessionStorage) {
11        return {
12            restrict: 'EA',
13            scope: {
14                suggestionsArr: '=', modelArr: '=ngModel', apiUrl: '@'
15            },
16            templateUrl: 'multiple-autocomplete-tpl.html',
17            link: function (scope, element, attr) {
18                scope.objectProperty = attr.objectProperty;
19                scope.selectedItemIndex = 0;
20                scope.name = attr.name;
21                scope.isRequired = attr.required;
22                scope.errMsgRequired = attr.errMsgRequired;
23                scope.isHover = false;
24                scope.isFocused = false;
25                scope.modelArr = [];
26                var getSuggestionsList = function () {
27                    var url = scope.apiUrl;
28                    $http({ method: 'GET', url: url }).then(function (response) {
29                        scope.suggestionsArr = response.data;
30                    }, function (response) {
31                        console.log("*****Angular-multiple-select **** ----- Unable to fetch list");
32                    });
33                };
34                if (scope.suggestionsArr == null || scope.suggestionsArr == "") {
35                    if (scope.apiUrl != null && scope.apiUrl != "")
36                        getSuggestionsList(); else { console.log("*****Angular-multiple-select **** ----- Please provide suggestion array list or url"); }
37                }
38
39                if ($sessionStorage.QRP != undefined) {
40                    if ($sessionStorage.QRP.Destination != undefined) {
41                        for (var i = 0; i < $sessionStorage.QRP.Destination.length; i++) {
42                            //scope.modelArr.push($localStorage.QRP.Destination[i]);
43                            scope.modelArr.push($filter('filter')($sessionStorage.CountryList, { Id: $sessionStorage.QRP.Destination[i] })[0]);
44                        }
45                    }
46                }
47                if (scope.modelArr == null || scope.modelArr == "") {
48                    scope.modelArr = [];
49                }
50                scope.onFocus = function () {
51                    scope.isFocused = true
52                };
53                scope.onMouseEnter = function () {
54                    scope.isHover = true
55                };
56                scope.onMouseLeave = function () {
57                    scope.isHover = false;
58                };
59                scope.onBlur = function () {
60                    scope.isFocused = false;
61                };
62                scope.onChange = function () {
63                    scope.selectedItemIndex = 0;
64                };
65                scope.keyParser = function ($event) {
66                    var keys = { 38: 'up', 40: 'down', 8: 'backspace', 13: 'enter', 9: 'tab', 27: 'esc' };
67                    var key = keys[$event.keyCode];
68                    if (key == 'backspace' && scope.inputValue == "") {
69                        if (scope.modelArr.length != 0)
70                            scope.modelArr.pop();
71                    }
72                    else if (key == 'down') {
73                        var filteredSuggestionArr = $filter('filter')(scope.suggestionsArr, scope.inputValue);
74                        filteredSuggestionArr = $filter('filter')(filteredSuggestionArr, scope.alreadyAddedValues);
75                        if (scope.selectedItemIndex < filteredSuggestionArr.length - 1)
76                            scope.selectedItemIndex++;
77                    }
78                    else if (key == 'up' && scope.selectedItemIndex > 0) {
79                        scope.selectedItemIndex--;
80                    }
81                    else if (key == 'esc') {
82                        scope.isHover = false; scope.isFocused = false;
83                    }
84                    else if (key == 'enter') {
85                        var filteredSuggestionArr = $filter('filter')(scope.suggestionsArr, scope.inputValue);
86                        filteredSuggestionArr = $filter('filter')(filteredSuggestionArr, scope.alreadyAddedValues);
87                        if (scope.selectedItemIndex < filteredSuggestionArr.length)
88                            scope.onSuggestedItemsClick(filteredSuggestionArr[scope.selectedItemIndex]);
89                    }
90                };
91                scope.onSuggestedItemsClick = function (selectedValue) {
92                    if (scope.modelArr.length > 9)
93                        return;
94                    scope.modelArr.push(selectedValue);
95                    scope.inputValue = "";
96                };
97                var isDuplicate = function (arr, item) {
98                    var duplicate = false;

98 if (arr == null || arr == "")
99                        return duplicate;
100                    for (var i = 0; i < arr.length; i++) {
101                        duplicate = angular.equals(arr[i], item);
102                        if (duplicate)
103                            break;
104                    }
105                    return duplicate;
106                };
107                scope.alreadyAddedValues = function (item) {
108                    var isAdded = true;
109                    isAdded = !isDuplicate(scope.modelArr, item);
110                    return isAdded;
111                };
112                scope.removeAddedValues = function (item) {
113                    if (scope.modelArr != null && scope.modelArr != "") {
114                        var itemIndex = scope.modelArr.indexOf(item);
115                        if (itemIndex != -1)
116                            scope.modelArr.splice(itemIndex, 1);
117                    }
118                };
119                scope.mouseEnterOnItem = function (index) {
120                    scope.selectedItemIndex = index;
121                };
122            }
123        };
124    }]);
125})();