-
Notifications
You must be signed in to change notification settings - Fork 13
/
SearchAutocomplete.js
103 lines (84 loc) · 3.74 KB
/
SearchAutocomplete.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import Ajax from 'framework/common/utils/Ajax';
import Register from 'framework/common/utils/Register';
export default class SearchAutocomplete {
constructor (props) {
this.options = {
minLength: 3,
requestDelay: 200
};
this.$input = null;
this.$searchAutocompleteResults = null;
this.requestTimer = null;
this.resultExists = false;
this.searchDataCache = {};
}
static init () {
const searchAutocomplete = new SearchAutocomplete();
searchAutocomplete.$input = $('#js-search-autocomplete-input');
searchAutocomplete.$searchAutocompleteResults = $('#js-search-autocomplete-results');
searchAutocomplete.$input.on('keyup paste', (event) => SearchAutocomplete.onInputChange(event, searchAutocomplete));
searchAutocomplete.$input.on('focus', function () {
if (searchAutocomplete.resultExists) {
searchAutocomplete.$searchAutocompleteResults.show();
}
});
$(document).click((event) => SearchAutocomplete.onDocumentClickHideAutocompleteResults(event, searchAutocomplete));
}
static onInputChange (event, searchAutocomplete) {
clearTimeout(searchAutocomplete.requestTimer);
// on "paste" event the $input.val() is not updated with new value yet,
// therefore call of search() method is scheduled for later
searchAutocomplete.requestTimer = setTimeout(() => SearchAutocomplete.search(searchAutocomplete), searchAutocomplete.options.requestDelay);
// do not propagate change events
// (except "paste" event that must be propagated otherwise the value is not pasted)
if (event.type !== 'paste') {
return false;
}
}
static onDocumentClickHideAutocompleteResults (event, searchAutocomplete) {
const $autocompleteElements = searchAutocomplete.$input.add(searchAutocomplete.$searchAutocompleteResults);
if (searchAutocomplete.resultExists && $(event.target).closest($autocompleteElements).length === 0) {
searchAutocomplete.$searchAutocompleteResults.hide();
}
}
static search (searchAutocomplete) {
const searchText = searchAutocomplete.$input.val();
if (searchText.length >= searchAutocomplete.options.minLength) {
if (searchAutocomplete.searchDataCache[searchText] !== undefined) {
searchAutocomplete.showResult(searchAutocomplete.searchDataCache[searchText]);
} else {
searchAutocomplete.searchRequest(searchText);
}
} else {
searchAutocomplete.resultExists = false;
searchAutocomplete.$searchAutocompleteResults.hide();
}
}
searchRequest (searchText) {
const _this = this;
Ajax.ajaxPendingCall('Shopsys.search.autocomplete.searchRequest', {
loaderElement: '.js-search-autocomplete-submit',
url: _this.$input.data('autocomplete-url'),
type: 'post',
dataType: 'html',
data: {
searchText: searchText
},
success: function (responseHtml) {
_this.searchDataCache[searchText] = responseHtml;
_this.showResult(responseHtml);
}
});
}
showResult (responseHtml) {
const $response = $($.parseHTML(responseHtml));
this.resultExists = $response.find('li').length > 0;
if (this.resultExists) {
this.$searchAutocompleteResults.show();
} else {
this.$searchAutocompleteResults.hide();
}
this.$searchAutocompleteResults.html(responseHtml);
}
}
(new Register()).registerCallback(SearchAutocomplete.init, 'SearchAutocomplete.init');