Skip to content

Commit 323e75d

Browse files
HollyPonyHollyPony
committed
Feature: input change mapping
1 parent cf3f6a2 commit 323e75d

File tree

4 files changed

+108
-42
lines changed

4 files changed

+108
-42
lines changed

‎src/dev-server.html‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@
77
<meta name="viewport" content="width=device-width">
88
</head>
99

10-
<body ng-app="dev-server" ng-controller="SearchController as $ctrl" ng-strict-di>
11-
<input-tags
12-
tags="$ctrl.tags"
13-
suggestions="$ctrl.suggestions"
14-
key-property="code"
15-
display-property="title"
16-
min-length="1"></input-tags>
10+
<body ng-app="dev-server" ng-strict-di>
11+
<dev-server></dev-server>
1712
</body>
1813
</html>

‎src/dev-server.js‎

Lines changed: 91 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,102 @@ import './input-tags.component';
55
import 'bootstrap/dist/css/bootstrap.css';
66

77
angular.module('dev-server', ['angularjs-input-tags'])
8-
.controller('SearchController', searchCtrl);
8+
.component('devServer', {
9+
template: `
10+
<input-tags
11+
tags="$ctrl.tags"
12+
suggestions="$ctrl.suggestions"
13+
disabled="$ctrl.disabled"
14+
key-property="code"
15+
display-property="title"
16+
input-search="$ctrl.inputSearch"
17+
get-suggestions="$ctrl.getSuggestions"
18+
min-length="1"></input-tags>`,
19+
controller: searchCtrl
20+
});
921

1022
function searchCtrl() {
1123
const vm = this;
1224

13-
vm.tags = [{
14-
code: 'lol',
15-
title: 'things'
16-
}];
17-
vm.suggestions = {
18-
title: 'root',
19-
data: [
20-
{
21-
code: 1,
22-
title: '1',
23-
data: [{
24-
code: 10,
25-
title: '10',
26-
data: [
27-
{code: 100, title: '100'},
28-
{code: 101, title: '101'},
29-
{code: 102, title: '102'}
30-
]
31-
}, {
32-
code: 11, title: '11'
33-
}, {
34-
code: 12,
35-
title: '12',
36-
data: [
37-
{code: 120, title: '120'},
38-
{code: 121, title: '121'},
39-
{code: 122, title: '122'}
25+
vm.$onInit = () => {
26+
vm.inputSearch = '';
27+
vm.tags = [];
28+
vm.disabled = false;
29+
vm.suggestions = {title: '', data: []};
30+
vm.getSuggestions();
31+
};
32+
33+
function flat(r, a) {
34+
r.push(a);
35+
if (Array.isArray(a.data)) {
36+
return a.data.reduce(flat, r);
37+
}
38+
return r;
39+
}
40+
41+
vm.getSuggestions = search => {
42+
const mock = {
43+
title: 'root',
44+
data: [
45+
{
46+
code: 1,
47+
title: '1',
48+
data: [{
49+
code: 10,
50+
title: '10',
51+
data: [
52+
{code: 100, title: '100'},
53+
{code: 101, title: '101'},
54+
{code: 102, title: '102'}
55+
]
56+
}, {
57+
code: 11, title: '11'
58+
}, {
59+
code: 12,
60+
title: '12',
61+
data: [
62+
{code: 120, title: '120'},
63+
{code: 121, title: '121'},
64+
{code: 122, title: '122'}
65+
]
66+
}
4067
]
68+
},
69+
{code: 2, title: '2'},
70+
{
71+
code: 3,
72+
title: '3',
73+
data: [{
74+
code: 30,
75+
title: '30',
76+
data: [
77+
{code: 300, title: '300'},
78+
{code: 301, title: '301'},
79+
{code: 302, title: '302'}
80+
]
81+
}, {
82+
code: 31, title: '31'
83+
}, {
84+
code: 32,
85+
title: '32',
86+
data: [
87+
{code: 320, title: '320'},
88+
{code: 321, title: '321'},
89+
{code: 322, title: '322'}
90+
]
91+
}]
4192
}
42-
]
43-
},
44-
{code: 2, title: '2'}
45-
]
93+
]
94+
};
95+
96+
const result = search ? mock.data.reduce(flat, []).filter(elem => {
97+
return String(elem.title).indexOf(String(search)) >= 0;
98+
}) : mock.data;
99+
100+
vm.suggestions.data.length = 0;
101+
vm.suggestions.title = mock.title;
102+
Array.prototype.push.apply(vm.suggestions.data, result);
103+
104+
console.log('devServer:getSuggestions.suggestions', vm.suggestions);
46105
};
47106
}

‎src/input-tags.component.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ class InputTags {
1515
this.autocompleteVisible = false;
1616

1717
this.tags = this.tags || [];
18-
this.suggestions = this.suggestions || [];
18+
this.suggestions = this.suggestions || {};
1919
this.displayProperty = this.displayProperty || 'text';
2020
this.keyProperty = this.keyProperty || '';
2121
this.placeholder = this.placeholder || 'Add a tag';
2222
this.spellcheck = this.spellcheck || true;
2323
this.minLength = this.minLength || 1;
2424
this.maxLength = this.maxLength || MAX_SAFE_INTEGER;
25+
this.inputDebounce = this.inputDebounce || 125;
2526
}
2627

2728
track(tag) {
@@ -60,6 +61,12 @@ class InputTags {
6061
return tag;
6162
}
6263

64+
inputChange() {
65+
if (this.getSuggestions) {
66+
this.getSuggestions(this.inputSearch);
67+
}
68+
}
69+
6370
triggerFocus() {
6471
this.autocompleteVisible = true;
6572
}
@@ -80,9 +87,11 @@ const InputTagsComponent = {
8087
spellcheck: '@',
8188
minLength: '@',
8289
maxLength: '@',
90+
inputDebounce: '@',
8391
tags: '<',
8492
suggestions: '<',
8593
disabled: '<',
94+
getSuggestions: '<',
8695
onTagAdding: '&',
8796
onTagAdded: '&',
8897
onTagRemoving: '&',

‎src/input-tags.template.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
</div>
1212

1313
<input-tags-auto-complete source="$ctrl.suggestions"
14-
on-tag-add="$ctrl.addTag(tag)"
15-
visible="$ctrl.autocompleteVisible"></input-tags-auto-complete>
14+
on-tag-add="$ctrl.addTag(tag)"
15+
visible="$ctrl.autocompleteVisible"></input-tags-auto-complete>
1616

1717
<input class="form-control"
1818
autocomplete="off"
@@ -21,6 +21,9 @@
2121
tabindex="{{$ctrl.tabindex}}"
2222
placeholder="{{$ctrl.placeholder}}"
2323
spellcheck="{{$ctrl.spellcheck}}"
24+
data-ng-model="$ctrl.inputSearch"
25+
ng-model-options="{ debounce: $ctrl.inputDebounce }"
26+
data-ng-change="$ctrl.inputChange()"
2427
data-ng-disabled="$ctrl.disabled"
2528
data-ng-focus="$ctrl.triggerFocus($event)"
2629
data-ng-blur="$ctrl.triggerBlur($event)">

0 commit comments

Comments
 (0)