diff --git a/jade/page-contents/autocomplete_content.html b/jade/page-contents/autocomplete_content.html index 17bd59f122..ce228352e6 100644 --- a/jade/page-contents/autocomplete_content.html +++ b/jade/page-contents/autocomplete_content.html @@ -112,6 +112,12 @@

Options

Sort function that defines the order of the list of autocomplete options. + + dropdownOptions + Object + {} + Pass options object to select dropdown initialization. + diff --git a/js/autocomplete.js b/js/autocomplete.js index 1bed2301a2..90b1eefac7 100644 --- a/js/autocomplete.js +++ b/js/autocomplete.js @@ -5,6 +5,12 @@ data: {}, // Autocomplete data set limit: Infinity, // Limit of results the autocomplete shows onAutocomplete: null, // Callback for when autocompleted + dropdownOptions: { + // Default dropdown options + autoFocus: false, + closeOnClick: false, + coverTrigger: false + }, minLength: 1, // Min characters before autocomplete starts sortFunction: function(a, b, inputString) { // Sort function for sorting autocomplete results @@ -152,14 +158,24 @@ this.$inputField.append(this.container); this.el.setAttribute('data-target', this.container.id); - this.dropdown = M.Dropdown.init(this.el, { - autoFocus: false, - closeOnClick: false, - coverTrigger: false, - onItemClick: (itemEl) => { - this.selectOption($(itemEl)); + // Initialize dropdown + let dropdownOptions = $.extend( + Autocomplete.defaults.dropdownOptions, + this.options.dropdownOptions + ); + let userOnItemClick = dropdownOptions.onItemClick; + + // Ensuring the selectOption call when user passes custom onItemClick function to dropdown + dropdownOptions.onItemClick = (el) => { + this.selectOption($(el)); + + // Handle user declared onItemClick if needed + if (userOnItemClick && typeof userOnItemClick === 'function') { + userOnItemClick.call(this.dropdown, this.el); } - }); + }; + + this.dropdown = M.Dropdown.init(this.el, dropdownOptions); // Sketchy removal of dropdown click handler this.el.removeEventListener('click', this.dropdown._handleClickBound);