initial commit

2 files changed, 187 insertions, 0 deletions

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..fa67f9b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,60 @@
+# bootstrap-5-autocomplete
+
+This is a rewrite of https://github.com/Honatas/bootstrap-4-autocomplete for bootstrap v5.
+
+### Example
+
+```js
+const ac = new Autocomplete(field, {
+    data: [{label: "I'm a label", value: 42}],
+    maximumItems: 5,
+    onSelectItem: ({label, value}) => {
+        console.log("user selected:", label, value);
+    }
+});
+
+// later, when you need to change the dataset
+
+ac.setData([
+    {label: 'New York JFK', value: 'JFK'},
+    {label: 'Moscow SVO', value: 'SVO'},
+]);
+```
+
+### Options
+
+Options is a JSON object with the following attributes (in alphabetical order):
+
+**data**:  
+The data from where autocomplete will lookup items to show. This data has to be an array of JSON objects. The format for every item in the array is:
+
+    {"label": "This is a text", "value": 42}
+
+**dropdownOptions**:  
+It's the same options from Bootstrap's Dropdown, documented [here](https://getbootstrap.com/docs/5.0/components/dropdowns/#options).
+
+**dropdownClass**:  
+The class of the dropdown-menu element, which is the box that is displayed. Can take a string or an array of strings.
+
+**highlightClass**:  
+The class to use when highlighting typed text on items. Only used when highlightTyped is true. Default is text-primary. Can take a string or an array of strings.
+
+**highlightTyped**:  
+Wether to highlight (style) typed text on items. Default is true.
+
+**maximumItems**:  
+How many items you want to show when the autocomplete is displayed. Default is 5. Set to 0 to display all available items.
+
+**onInput**
+
+**onSelectItem**:  
+A callback that is fired every time an item is selected. It receives an object in following format:
+    
+    {label: <label>, value: <value>}
+
+**treshold**:  
+The number of characters that need to be typed on the input in order to trigger the autocomplete. Default is 4.
+
+### License
+
+MIT
\ No newline at end of file
diff --git a/autocomplete.js b/autocomplete.js
new file mode 100644
index 0000000..c336123
--- /dev/null
+++ b/autocomplete.js
@@ -0,0 +1,127 @@
+const DEFAULTS = {
+  treshold: 2,
+  maximumItems: 5,
+  highlightTyped: true,
+  highlightClass: 'text-primary',
+};
+
+class Autocomplete {
+  constructor(field, options) {
+    this.field = field;
+    this.options = Object.assign({}, DEFAULTS, options);
+    this.dropdown = null;
+
+    field.parentNode.classList.add('dropdown');
+    field.setAttribute('data-toggle', 'dropdown');
+    field.classList.add('dropdown-toggle');
+
+    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)
+
+    field.addEventListener('click', (e) => {
+      if (this.createItems() === 0) {
+        e.stopPropagation();
+        this.dropdown.hide();
+      }
+    });
+
+    field.addEventListener('input', () => {
+      if (this.options.onInput)
+        this.options.onInput(this.field.value);
+      this.renderIfNeeded();
+    });
+
+    field.addEventListener('keydown', (e) => {
+      if (e.keyCode === 27) {
+        this.dropdown.hide();
+        return;
+      }
+    });
+  }
+
+  setData(data) {
+    this.options.data = data;
+  }
+
+  renderIfNeeded() {
+    if (this.createItems() > 0)
+      this.dropdown.show();
+    else
+      this.field.click();
+  }
+
+  createItem(lookup, item) {
+    let label;
+    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 : '')
+      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
+      label = item.label;
+    return ce(`<button type="button" class="dropdown-item" data-value="${item.value}">${label}</button>`);
+  }
+
+  createItems() {
+    const lookup = this.field.value;
+    if (lookup.length < this.options.treshold) {
+      this.dropdown.hide();
+      return 0;
+    }
+
+    const items = this.field.nextSibling;
+    items.innerHTML = '';
+
+    let count = 0;
+    for (let i = 0; i < this.options.data.length; i++) {
+      const {label, value} = this.options.data[i];
+      const item = {label, value};
+      if (item.label.toLowerCase().indexOf(lookup.toLowerCase()) >= 0) {
+        items.appendChild(this.createItem(lookup, item));
+        if (this.options.maximumItems > 0 && ++count >= this.options.maximumItems)
+          break;
+      }
+    }
+
+    this.field.nextSibling.querySelectorAll('.dropdown-item').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        let dataValue = e.target.getAttribute('data-value');
+        this.field.value = e.target.innerText;
+        if (this.options.onSelectItem)
+          this.options.onSelectItem({
+            value: e.target.value,
+            label: e.target.innerText,
+          });
+        this.dropdown.hide();
+      })
+    });
+
+    return items.childNodes.length;
+  }
+}
+
+/**
+ * @param html
+ * @returns {Node}
+ */
+function ce(html) {
+  let div = document.createElement('div');
+  div.innerHTML = html;
+  return div.firstChild;
+}
+
+/**
+ * @param elem
+ * @param refElem
+ * @returns {*}
+ */
+function insertAfter(elem, refElem) {
+  return refElem.parentNode.insertBefore(elem, refElem.nextSibling)
+}
\ No newline at end of file