Skip to content

Commit 7da0213

Browse files
authored
Merge pull request #60 from nicknickel/autocomplete-dropdown-opts
enable autocomplete to accept dropdown options
2 parents 31c6538 + 88fa44a commit 7da0213

File tree

2 files changed

+29
-7
lines changed

2 files changed

+29
-7
lines changed

jade/page-contents/autocomplete_content.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,12 @@ <h3 class="header">Options</h3>
112112
<td></td>
113113
<td>Sort function that defines the order of the list of autocomplete options.</td>
114114
</tr>
115+
<tr>
116+
<td>dropdownOptions</td>
117+
<td>Object</td>
118+
<td>{}</td>
119+
<td>Pass options object to select dropdown initialization.</td>
120+
</tr>
115121
</tbody>
116122
</table>
117123

js/autocomplete.js

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
data: {}, // Autocomplete data set
66
limit: Infinity, // Limit of results the autocomplete shows
77
onAutocomplete: null, // Callback for when autocompleted
8+
dropdownOptions: {
9+
// Default dropdown options
10+
autoFocus: false,
11+
closeOnClick: false,
12+
coverTrigger: false
13+
},
814
minLength: 1, // Min characters before autocomplete starts
915
sortFunction: function(a, b, inputString) {
1016
// Sort function for sorting autocomplete results
@@ -152,14 +158,24 @@
152158
this.$inputField.append(this.container);
153159
this.el.setAttribute('data-target', this.container.id);
154160

155-
this.dropdown = M.Dropdown.init(this.el, {
156-
autoFocus: false,
157-
closeOnClick: false,
158-
coverTrigger: false,
159-
onItemClick: (itemEl) => {
160-
this.selectOption($(itemEl));
161+
// Initialize dropdown
162+
let dropdownOptions = $.extend(
163+
Autocomplete.defaults.dropdownOptions,
164+
this.options.dropdownOptions
165+
);
166+
let userOnItemClick = dropdownOptions.onItemClick;
167+
168+
// Ensuring the selectOption call when user passes custom onItemClick function to dropdown
169+
dropdownOptions.onItemClick = (el) => {
170+
this.selectOption($(el));
171+
172+
// Handle user declared onItemClick if needed
173+
if (userOnItemClick && typeof userOnItemClick === 'function') {
174+
userOnItemClick.call(this.dropdown, this.el);
161175
}
162-
});
176+
};
177+
178+
this.dropdown = M.Dropdown.init(this.el, dropdownOptions);
163179

164180
// Sketchy removal of dropdown click handler
165181
this.el.removeEventListener('click', this.dropdown._handleClickBound);

0 commit comments

Comments
 (0)