-
Notifications
You must be signed in to change notification settings - Fork 110
/
autoComplete.js
88 lines (79 loc) · 2.81 KB
/
autoComplete.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
import debounce from './debounce';
import { isObject } from './isType';
import { isValidText } from './isValidInputType';
/*
* Looks up the id for the text selected by the user in the jquery autocomplete combobox and
* then sets updates the hidden id field with the id value so that its available on form submit.
* The id-text mappings are stored as JSON in the corresponding hidden crosswalk field
* @param the combobox element
*/
const updateIdField = (el) => {
const crosswalk = $(`#${$(el).attr('id')}_crosswalk`);
const idField = $(el).attr('id').replace(/_name/, '_id');
if (isObject(crosswalk) && isObject($(idField))) {
const json = JSON.parse(`${$(crosswalk).val().replace(/\\"/g, '"').replace(/\\'/g, '\'')}`);
const selection = (json[$(el).val()] === undefined ? '' : json[$(el).val()]);
$(el).parent().siblings(`#${idField}`).val(selection)
.change();
}
};
/*
* The accessible autocomplete box escapes characters so we need to decode any valid ones
* so that they appear correctly to the user and are able to be matched to the JSON list
* so we can retrieve the correct org id.
* We only decode certain characters here by design.
*/
const decodeHtml = (el) => {
if (isObject(el)) {
return $(el).val()
.replace(/&/g, '&')
.replace(/'/g, '\'')
.replace(/"/g, '"');
}
return '';
};
/*
* Shows/hides the combobox's clear button based on whether or not text is present
* @param the combobox id
*/
const toggleClearButton = (el) => {
const clearButton = $(el).parent().find('.combobox-clear-button');
if (isObject(clearButton)) {
if (isValidText($(el).val())) {
$(clearButton).removeClass('hidden');
} else {
$(clearButton).addClass('hidden');
}
}
};
/*
* Wires up the jquery autocomplete combobox so that it calls the above 2 functions when the
* user changes the text values in the combobox by typing or selecting a value
*/
export default () => {
$('.js-combobox').each((idx, el) => {
// Swap out the 'X' with a fontawesome icon
$(el).siblings('.combobox-clear-button').text('')
.addClass('fa')
.addClass('fa-times-circle');
const debounced = debounce((e) => {
toggleClearButton(e);
updateIdField(e);
}, 100);
// When the value in the combobox changes update the hidden id field
$(el).on('keyup focus', (e) => {
const txt = $(e.target);
$(txt).val(decodeHtml(txt));
debounced(txt);
});
// Clear the text and hide the button when the user clicks the clear button
$(el).parent().find('.combobox-clear-button').on('click', () => {
$(el).val('');
debounced(el);
});
// add a Bootstrap 'hide' class to the invisible help text
$('.invisible').addClass('hide');
// Show/hide the clear button on page load
toggleClearButton(el);
});
};