Lines 11-16
Link Here
|
11 |
* @param {boolean} [config.useKeyAsValue=false] - Whether to use the option's key (either HTML data-* or JavaScript `valueProperty`) as the value of the input (default: false). |
11 |
* @param {boolean} [config.useKeyAsValue=false] - Whether to use the option's key (either HTML data-* or JavaScript `valueProperty`) as the value of the input (default: false). |
12 |
* @param {string} [config.placeholder='Select or type a value'] - Placeholder text for the input element. |
12 |
* @param {string} [config.placeholder='Select or type a value'] - Placeholder text for the input element. |
13 |
* @param {string} [config.labelId=''] - Optional ID of the associated label element. |
13 |
* @param {string} [config.labelId=''] - Optional ID of the associated label element. |
|
|
14 |
* @param {string} [config.context='default'] - Positioning context ('default' or 'modal'). |
14 |
* |
15 |
* |
15 |
* @example |
16 |
* @example |
16 |
* ```html |
17 |
* ```html |
Lines 35-43
Link Here
|
35 |
* displayProperty: 'name', |
36 |
* displayProperty: 'name', |
36 |
* valueProperty: 'id', |
37 |
* valueProperty: 'id', |
37 |
* useKeyAsValue: true, |
38 |
* useKeyAsValue: true, |
|
|
39 |
* context: 'modal', |
38 |
* }); |
40 |
* }); |
39 |
* // or using jQuery |
41 |
* // or using jQuery |
40 |
* $("#generic-combobox").comboBox({ ... }); |
42 |
* $("#generic-combobox").comboBox({ displayProperty: 'name', context: 'modal' }); |
41 |
* </script> |
43 |
* </script> |
42 |
* ``` |
44 |
* ``` |
43 |
*/ |
45 |
*/ |
Lines 51-56
Link Here
|
51 |
placeholder = "Select or type a value", |
53 |
placeholder = "Select or type a value", |
52 |
labelId = "", |
54 |
labelId = "", |
53 |
useKeyAsValue = false, |
55 |
useKeyAsValue = false, |
|
|
56 |
context = "default", |
54 |
} = config; |
57 |
} = config; |
55 |
|
58 |
|
56 |
const input = document.getElementById(inputId); |
59 |
const input = document.getElementById(inputId); |
Lines 60-68
Link Here
|
60 |
return; |
63 |
return; |
61 |
} |
64 |
} |
62 |
|
65 |
|
63 |
const bootstrapDropdown = new bootstrap.Dropdown(input, { |
66 |
const dropdownOptions = { |
64 |
autoClose: false, |
67 |
autoClose: false, |
65 |
}); |
68 |
popperConfig: { |
|
|
69 |
strategy: { default: "absolute", modal: "fixed" }[context], |
70 |
}, |
71 |
}; |
72 |
const bootstrapDropdown = new bootstrap.Dropdown( |
73 |
input, |
74 |
dropdownOptions |
75 |
); |
66 |
|
76 |
|
67 |
// Existing options from HTML |
77 |
// Existing options from HTML |
68 |
const existingOptions = Array.from(dropdownMenu.querySelectorAll("li")) |
78 |
const existingOptions = Array.from(dropdownMenu.querySelectorAll("li")) |
69 |
- |
|
|