finished coupling chips and autocomplete

Author: acburst

CHANGELOG.md

@@ -14,6 +14,10 @@ Bolded styling surrounded by emojis indicates a breaking change.
   - changed events to callbacks
   - Added max chips option
 
+- Autocomplete
+  - rewritten with classes
+  - Added updateData method
+
 ## v0.100.1 (July 21st)
 - Fixed bug where modal triggers could not contain child elements
 - Fixed bug with right alignment option for dropdown

Gruntfile.js

@@ -308,7 +308,7 @@ module.exports = function(grunt) {
             "toasts.js",
             "sidenav.js",
             "scrollspy.js",
-            "/autocomplete.js",
+            "autocomplete.js",
             "forms.js",
             "slider.js",
             "cards.js",

jade/page-contents/chips_content.html

@@ -47,16 +47,16 @@ <h4>Tags</h4>
       <div id="basic" class="section scrollspy">
         <h4>Javascript Plugin Usage</h4>
         <p class="caption">To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by using your delete button.</p>
-        <div class="chips"></div>
+        <div class="chips"><input></div>
         <br>
         <p class="caption">Set initial tags.</p>
-        <div class="chips chips-initial"></div>
+        <div class="chips chips-initial"><input></div>
         <br>
         <p class="caption">Use placeholders and override hint texts.</p>
-        <div class="chips chips-placeholder"></div>
+        <div class="chips chips-placeholder"><input></div>
         <br>
         <p class="caption">Use autocomplete with chips.</p>
-        <div class="chips chips-autocomplete"></div>
+        <div class="chips chips-autocomplete"><input></div>
       </div>
 
       <div id="properties" class="section scrollspy">

js/autocomplete.js

@@ -46,12 +46,12 @@
       this.options = $.extend({}, Autocomplete.defaults, options);
 
       // Setup
+      this.isOpen = false;
       this.count = 0;
       this.activeIndex = -1;
       this.oldVal;
       this.$inputField = this.$el.closest('.input-field');
       this.$active = $();
-      console.log(this.$inputField);
       this._setupDropdown();
 
       this._setupEventHandlers();
@@ -81,6 +81,7 @@
      */
     destroy() {
       this._removeEventHandlers();
+      this._removeDropdown();
       this.el.M_Autocomplete = undefined;
     }
 
@@ -128,6 +129,13 @@
       this.$inputField.append(this.container);
     }
 
+    /**
+     * Remove dropdown
+     */
+    _removeDropdown() {
+      this.container.parentNode.removeChild(this.container);
+    }
+
     /**
      * Handle Input Blur
      */
@@ -140,6 +148,12 @@
      * @param {Event} e
      */
     _handleInputKeyupAndFocus(e) {
+      console.log(e.type);
+      if (e.type === 'keyup') {
+        console.log("SET KEYDUP");
+        Autocomplete._keydown = false;
+      }
+
       this.count = 0;
       let val = this.el.value.toLowerCase();
 
@@ -155,26 +169,8 @@
         this._removeAutocomplete();
 
         if (val.length >= this.options.minLength) {
-          for (let key in this.options.data) {
-            if (this.options.data.hasOwnProperty(key) &&
-                key.toLowerCase().indexOf(val) !== -1) {
-              // Break if past limit
-              if (this.count >= this.options.limit) {
-                break;
-              }
-
-              let $autocompleteOption = $('<li></li>');
-              if (!!this.options.data[key]) {
-                $autocompleteOption.append('<img src="'+ this.options.data[key] +'" class="right circle"><span>'+ key +'</span>');
-              } else {
-                $autocompleteOption.append('<span>'+ key +'</span>');
-              }
-
-              $(this.container).append($autocompleteOption);
-              this._highlight(val, $autocompleteOption);
-              this.count++;
-            }
-          }
+          this.isOpen = true;
+          this._renderDropdown(this.options.data, val);
         }
       }
 
@@ -187,6 +183,9 @@
      * @param {Event} e
      */
     _handleInputKeydown(e) {
+      console.log("SET KEYDOWN");
+      Autocomplete._keydown = true;
+
       // Arrow keys and enter key usage
       let keyCode = e.keyCode,
           liElement,
@@ -265,6 +264,7 @@
       $(this.container).empty();
       this._resetCurrentElement();
       this.oldVal = null;
+      this.isOpen = false;
     }
 
     /**
@@ -279,11 +279,60 @@
 
       // Handle onAutocomplete callback.
       if (typeof(this.options.onAutocomplete) === 'function') {
-        this.options.onAutocomplete.call(this, this.$el, text);
+        this.options.onAutocomplete.call(this, text);
+      }
+    }
+
+    /**
+     * Render dropdown content
+     * @param {Object} data  data set
+     * @param {String} val  current input value
+     */
+    _renderDropdown(data, val) {
+      this._removeAutocomplete();
+
+      for (let key in data) {
+        if (data.hasOwnProperty(key) &&
+            key.toLowerCase().indexOf(val) !== -1) {
+          // Break if past limit
+          if (this.count >= this.options.limit) {
+            break;
+          }
+
+          let $autocompleteOption = $('<li></li>');
+          if (!!data[key]) {
+            $autocompleteOption.append('<img src="'+ data[key] +'" class="right circle"><span>'+ key +'</span>');
+          } else {
+            $autocompleteOption.append('<span>'+ key +'</span>');
+          }
+
+          $(this.container).append($autocompleteOption);
+          this._highlight(val, $autocompleteOption);
+          this.count++;
+        }
+      }
+    }
+
+    /**
+     * Update Data
+     * @param {Object} data
+     */
+    updateData(data) {
+      let val = this.el.value.toLowerCase();
+      this.options.data = data;
+
+      if (this.isOpen) {
+        this._renderDropdown(data, val);
       }
     }
   }
 
+  /**
+   * @static
+   * @memberof Autocomplete
+   */
+  Autocomplete._keydown = false;
+
   Materialize.Autocomplete = Autocomplete;
 
   jQuery.fn.autocomplete = function(methodOrOptions) {

js/chips.js

@@ -51,12 +51,12 @@
        */
       this.options = $.extend({}, Chips.defaults, options);
 
-      // this.$el.empty();
-      this.$el.addClass('chips');
+      this.$el.addClass('chips input-field');
       this.chipsData = [];
       this.$chips = $();
       this.$input = this.$el.find('input');
       this.$input.addClass('input');
+      this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
 
       // Set input id
       if (!this.$input.attr('id')) {
@@ -69,6 +69,12 @@
         this._renderChips(this.chipsData);
       }
 
+      console.log(this.hasAutocomplete);
+      if (this.hasAutocomplete) {
+        this._setupAutocomplete();
+      }
+
+      this._setPlaceholder();
       // this._createLabel();
       this._setupEventHandlers();
     }
@@ -114,11 +120,15 @@
     _setupEventHandlers() {
       this._handleChipClickBound = this._handleChipClick.bind(this);
       this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
+      this._handleInputFocusBound = this._handleInputFocus.bind(this);
+      this._handleInputBlurBound = this._handleInputBlur.bind(this);
 
       this.el.addEventListener('click', this._handleChipClickBound);
       document.addEventListener('keydown', Chips._handleChipsKeydown);
       document.addEventListener('keyup', Chips._handleChipsKeyup);
       this.el.addEventListener('blur', Chips._handleChipsBlur, true);
+      this.$input[0].addEventListener('focus', this._handleInputFocusBound);
+      this.$input[0].addEventListener('blur', this._handleInputBlurBound);
       this.$input[0].addEventListener('keydown', this._handleInputKeydownBound);
     }
 
@@ -130,6 +140,8 @@
       document.removeEventListener('keydown', Chips._handleChipsKeydown);
       document.removeEventListener('keyup', Chips._handleChipsKeyup);
       this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
+      this.$input[0].removeEventListener('focus', this._handleInputFocusBound);
+      this.$input[0].removeEventListener('blur', this._handleInputBlurBound);
       this.$input[0].removeEventListener('keydown', this._handleInputKeydownBound);
     }
 
@@ -153,6 +165,10 @@
           // select chip
           this.selectChip(index);
         }
+
+      // Default handle click to focus on input
+      } else {
+        this.$input[0].focus();
       }
     }
 
@@ -236,6 +252,20 @@
       }
     }
 
+    /**
+     * Handle Input Focus
+     */
+    _handleInputFocus() {
+      this.$el.addClass('focus');
+    }
+
+    /**
+     * Handle Input Blur
+     */
+    _handleInputBlur() {
+      this.$el.removeClass('focus');
+    }
+
     /**
      * Handle Input Keydown
      * @param {Event} e
@@ -246,6 +276,14 @@
       console.log(e.keyCode, e.which, this.$input[0].value, this.chipsData);
       // enter
       if (e.keyCode === 13) {
+        // Override enter if autocompleting.
+        console.log(this.hasAutocomplete, this.autocomplete, Materialize.Autocomplete._keydown);
+        if (this.hasAutocomplete &&
+            this.autocomplete &&
+            this.autocomplete.isOpen) {
+          return;
+        }
+
         e.preventDefault();
         this.addChip({tag: this.$input[0].value});
         this.$input[0].value = '';
@@ -302,6 +340,20 @@
       this.$el.append(this.$input);
     }
 
+    /**
+     * Setup Autocomplete
+     */
+    _setupAutocomplete() {
+      this.options.autocompleteOptions.onAutocomplete = (val) => {
+        this.addChip({tag: val});
+        this.$input[0].value = '';
+        this.$input[0].focus();
+      };
+
+      this.autocomplete = Materialize.Autocomplete.init(this.$input, this.options.autocompleteOptions)[0];
+      console.log(this.autocomplete);
+    }
+
     /**
      * Render Chips
      */
@@ -765,7 +817,7 @@
     // Handle removal of static chips.
     $(document).on('click', '.chip .close', function() {
       let $chips = $(this).closest('.chips');
-      if (!$chips.length || $chips[0].M_Chips) {
+      if ($chips.length && $chips[0].M_Chips) {
         return;
       }
       $(this).closest('.chip').remove();

js/init.js

@@ -198,8 +198,8 @@
     }
 
     // Chips
-    $('.chips').material_chip();
-    $('.chips-initial').material_chip({
+    $('.chips').chips();
+    $('.chips-initial').chips({
       readOnly: true,
       data: [{
         tag: 'Apple',
@@ -209,11 +209,11 @@
         tag: 'Google',
       }]
     });
-    $('.chips-placeholder').material_chip({
+    $('.chips-placeholder').chips({
       placeholder: 'Enter a tag',
       secondaryPlaceholder: '+Tag',
     });
-    $('.chips-autocomplete').material_chip({
+    $('.chips-autocomplete').chips({
       autocompleteOptions: {
         data: {
           'Apple': null,

tests/spec/autocomplete/autocompleteSpec.js

@@ -34,12 +34,10 @@ describe("Autocomplete Plugin", function () {
             "Google": 'http://placehold.it/250x250'
           }
         });
-        
+
         var $autocompleteEl = $parent.find('.autocomplete-content');
-        var autocompleteEvents = $._data($normal[0], 'events');
-        
+
         expect($autocompleteEl.length).toEqual(1, 'Should dynamically generate autocomplete structure.');
-        expect(autocompleteEvents.keyup.length).toEqual(1, 'Should only bind 1 keyup handler on input');
         done();
       }, 400);
     });