xxxxxxxxxx
1
<select data-mdb-select-init data-mdb-filter="true" id="mySelect" multiple>
2
<option value="1">One</option>
3
<option value="2">Two</option>
4
<option value="3">Three</option>
5
<option value="4">Four</option>
6
<option value="5">Five</option>
7
<option value="6">Six</option>
8
<option value="7">Seven</option>
9
<option value="8">Eight</option>
10
<option value="9">Nine</option>
11
<option value="10">Ten</option>
12
</select>
xxxxxxxxxx
1
.select-transition-none .select-dropdown {
2
transition: none !important
3
}
xxxxxxxxxx
1
const selectEl = document.querySelector('#mySelect');
2
const selectId = selectEl.id;
3
4
let selectInstance = mdb.Select.getInstance(selectEl);
5
6
const addNewOption = (option) => {
7
selectInstance.dispose();
8
9
const newOption = document.createElement('option');
10
newOption.value = option;
11
newOption.text = option;
12
newOption.selected = true;
13
selectEl.add(newOption);
14
15
selectInstance = new mdb.Select(selectEl);
16
selectInstance.open();
17
}
18
19
20
selectEl.addEventListener('opened.mdb.select', (e) => {
21
document.body.classList.remove('select-transition-none')
22
const selectWrapper = document.querySelector(`#select-dropdown-container-${selectId}`);
23
const searchInput = selectWrapper.querySelector('.select-filter-input')
24
25
searchInput.addEventListener('keydown', (e) => {
26
const isEnter = e.key === 'Enter'
27
if (isEnter && selectWrapper.querySelector('.select-no-results')) {
28
const searchValue = searchInput.value;
29
document.body.classList.add('select-transition-none')
30
selectEl.addEventListener('closed.mdb.select', () => {
31
addNewOption(searchValue)
32
}, {once: true});
33
selectInstance.close();
34
}
35
})
36
})
37
Console errors: 0