diff options
Diffstat (limited to 'autocomplete.js')
| -rw-r--r-- | autocomplete.js | 47 |
1 files changed, 34 insertions, 13 deletions
diff --git a/autocomplete.js b/autocomplete.js index 7a9f151..169d3ed 100644 --- a/autocomplete.js +++ b/autocomplete.js @@ -3,6 +3,9 @@ const DEFAULTS = { maximumItems: 5, highlightTyped: true, highlightClass: 'text-primary', + label: 'label', + value: 'value', + showValue: false, }; class Autocomplete { @@ -15,13 +18,13 @@ class Autocomplete { field.setAttribute('data-bs-toggle', 'dropdown'); field.classList.add('dropdown-toggle'); - const dropdown = ce(`<div class="dropdown-menu" ></div>`); + const dropdown = ce(`<div class="dropdown-menu"></div>`); if (this.options.dropdownClass) dropdown.classList.add(this.options.dropdownClass); insertAfter(dropdown, field); - this.dropdown = new bootstrap.Dropdown(field, this.options.dropdownOptions) + this.dropdown = new bootstrap.Dropdown(field, this.options.dropdownOptions); field.addEventListener('click', (e) => { if (this.createItems() === 0) { @@ -65,13 +68,19 @@ class Autocomplete { if (this.options.highlightTyped) { const idx = item.label.toLowerCase().indexOf(lookup.toLowerCase()); const className = Array.isArray(this.options.highlightClass) ? this.options.highlightClass.join(' ') - : (typeof this.options.highlightClass == 'string' ? this.options.highlightClass : '') + : (typeof this.options.highlightClass == 'string' ? this.options.highlightClass : ''); label = item.label.substring(0, idx) + `<span class="${className}">${item.label.substring(idx, idx + lookup.length)}</span>` + item.label.substring(idx + lookup.length, item.label.length); - } else + } else { label = item.label; - return ce(`<button type="button" class="dropdown-item" data-value="${item.value}">${label}</button>`); + } + + if (this.options.showValue) { + label += ` ${item.value}`; + } + + return ce(`<button type="button" class="dropdown-item" data-label="${item.label}" data-value="${item.value}">${label}</button>`); } createItems() { @@ -84,10 +93,17 @@ class Autocomplete { const items = this.field.nextSibling; items.innerHTML = ''; + const keys = Object.keys(this.options.data); + let count = 0; - for (let i = 0; i < this.options.data.length; i++) { - const {label, value} = this.options.data[i]; - const item = {label, value}; + for (let i = 0; i < keys.length; i++) { + const key = keys[i]; + const entry = this.options.data[key]; + const item = { + label: this.options.label ? entry[this.options.label] : key, + value: this.options.value ? entry[this.options.value] : entry + }; + if (item.label.toLowerCase().indexOf(lookup.toLowerCase()) >= 0) { items.appendChild(this.createItem(lookup, item)); if (this.options.maximumItems > 0 && ++count >= this.options.maximumItems) @@ -97,13 +113,18 @@ class Autocomplete { this.field.nextSibling.querySelectorAll('.dropdown-item').forEach((item) => { item.addEventListener('click', (e) => { + let dataLabel = e.target.getAttribute('data-label'); let dataValue = e.target.getAttribute('data-value'); - this.field.value = e.target.innerText; - if (this.options.onSelectItem) + + this.field.value = dataLabel; + + if (this.options.onSelectItem) { this.options.onSelectItem({ - value: e.target.dataset.value, - label: e.target.innerText, + value: dataValue, + label: dataLabel }); + } + this.dropdown.hide(); }) }); @@ -128,5 +149,5 @@ function ce(html) { * @returns {*} */ function insertAfter(elem, refElem) { - return refElem.parentNode.insertBefore(elem, refElem.nextSibling) + return refElem.parentNode.insertBefore(elem, refElem.nextSibling); } |