From 024880c5248f748881731f0507e90370997e8aad Mon Sep 17 00:00:00 2001
From: sp00n <sp.00.n@gmx.net>
Date: Thu, 20 May 2021 23:53:28 +0200
Subject: Added a displayLabelWithValue option

Setting displayLabelWithValue to true will display the value after the label in the dropdown.
Also added a couple of missing semicolons.
---
 autocomplete.js | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/autocomplete.js b/autocomplete.js
index 016f8c3..f6daa71 100644
--- a/autocomplete.js
+++ b/autocomplete.js
@@ -4,7 +4,8 @@ const DEFAULTS = {
   highlightTyped: true,
   highlightClass: 'text-primary',
   label: 'label',
-  value: 'value'
+  value: 'value',
+  displayLabelWithValue: false,
 };
 
 class Autocomplete {
@@ -23,7 +24,7 @@ class Autocomplete {
 
     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) {
@@ -67,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.displayLabelWithValue) {
+      label += ` ${item.value}`;
+    }
+
+    return ce(`<button type="button" class="dropdown-item" data-label="${item.label}" data-value="${item.value}">${label}</button>`);
   }
 
   createItems() {
@@ -106,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();
       })
     });
@@ -137,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);
 }
-- 
cgit v1.2.3