paper-input-autocomplete.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-material/paper-material.html">

<!--
Paper Input Autocomplete field to offer a type-ahead functionality

Example:

    <paper-input-autocomplete id="fruits" label="Fruits"></paper-input-autocomplete>

    <script>
      document.getElementById('fruits').source = ['Apple', 'Orange', 'Bananas'];
    </script>

@group Paper Elements
@element paper-input-autocomplete
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="paper-input-autocomplete">
  <style>
    :host {
      display: block;
      box-sizing: border-box;
      position: relative;
    }

    .input-wrapper {
      @apply(--layout-horizontal);
    }

    .input-wrapper paper-input {
      @apply(--layout-flex);
    }

    #suggestionsWrapper {
      display: none;
      background-color: white;
    }

    :host[suggestions-in-overlay="true"] #suggestionsWrapper {
      width: 100%;
      position: absolute;
      z-index: 1000;
    }

    paper-item {
      position: relative;
      cursor: pointer;
    }
    paper-item.active {
      background: rgb(220,220,220);
    }

    #clear{
      display: none;
    }
  </style>

  <template>
    <div class="input-wrapper">
      <paper-input id="input"
        label="{{label}}"
        on-keydown="_handleSuggestionTraversing"
        on-keyup="_handleSuggestions"
        disabled="{{disabled}}"
        invalid="{{invalid}}"
        prevent-invalid-input="{{preventInvalidInput}}"
        allowedpattern="{{allowedPattern}}"
        type="{{type}}"
        list="{{list}}"
        pattern="{{pattern}}"
        required="{{required}}"
        maxlength="{{maxlength}}"
        error-message="{{errorMessage}}"
        char-counter="{{charCounter}}"
        auto-validate="{{autoValidate}}"
        validator="{{validator}}"
        autocomplete="{{autocomplete}}"
        autofocus="{{autofocus}}"
        inputmode="{{inputmode}}"
        minlength="{{minlength}}"
        name="{{name}}"
        placeholder="{{placeholder}}"
        readonly="{{readonly}}"
        size="{{size}}"
        _aria-described-by="{{_ariaDescribedBy}}"
        value="{{inputValue}}"
        no-label-float="{{noLabelFloat}}"
        always-float-label="{{alwaysFloatLabel}}"
        display-options-on-focus="{{displayOptionsOnFocus}}"
        on-focus="_onFocus"
        on-blur="_onBlur"
      ></paper-input>
      <paper-icon-button id="clear" icon="clear" on-click="clear"></paper-icon-button>
    </div>
    <paper-material elevation="1" id="suggestionsWrapper">
      <template is="dom-repeat" items="{{_suggestions}}">
        <paper-item on-mouseover="_handleSuggestionPreview" class$="{{setSuggestionClass(index, suggestionPreviewed)}}" on-click="_selectSuggestion">
          <div>{{item.text}}</div>
          <paper-ripple></paper-ripple>
        </paper-item>
      </template>
    </paper-material>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'paper-input-autocomplete',

    properties: {

      /**
       * `label` Text to display as the input label
       */
      label: String,

      /**
       * `source` Array of objects with the options to execute the autocomplete feature
       */
      source: Array,

      /**
       * `searchProperty` Property of the source objects that will be used to execute
       * the autocomplete feature
       */
      searchProperty: String,

      /**
       * `autocompleteSearchLength` Number that determines when the autocomplete will start
       * searching for matches
       */
      autocompleteSearchLength: {
        type: Number,
        value: 1
      },

      /**
       * `value` Selected object from the suggestions
       */
      value: {
        type: Object,
        notify: true
      },

      /**
        * `inputValue` Current value of the input-paper element
        */
      inputValue: {
          type: String,
          notify: true
      },

      /**
       * `suggestionsInOverlay` Display the suggestions in an overlay above the next elements
       */
      suggestionsInOverlay: Boolean,

      /**
       * `_suggestions` Array with the actual suggestions to display
       */
      _suggestions: Array,

      /**
       * Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
       * and the input's `disabled` property.
       */
      disabled: {
          type: Boolean,
          value: false
      },

      /**
       * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
       * and the input's `invalid` property.
       */
      invalid: {
          type: Boolean,
          value: false
      },

      /**
       * Set to true to prevent the user from entering invalid input. Bind this to the
       * `<input is="iron-input">`'s `preventInvalidInput` property.
       */
      preventInvalidInput: {
          type: Boolean
      },

      /**
       * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
       * `<input is="iron-input">`'s `allowedPattern` property.
       */
      allowedPattern: {
          type: String
      },

      /**
       * The type of the input. The supported types are `text`, `number` and `password`. Bind this
       * to the `<input is="iron-input">`'s `type` property.
       */
      type: {
          type: String
      },

      /**
       * The datalist of the input (if any). This should match the id of an existing <datalist>. Bind this
       * to the `<input is="iron-input">`'s `list` property.
       */
      list: {
          type: String
      },

      /**
       * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
       * `pattern` property.
       */
      pattern: {
          type: String
      },

      /**
       * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
       * `required` property.
       */
      required: {
          type: Boolean,
          value: false
      },

      /**
       * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
       * `maxlength` property.
       */
      maxlength: {
          type: Number
      },

      /**
       * The error message to display when the input is invalid. Bind this to the
       * `<paper-input-error>`'s content, if using.
       */
      errorMessage: {
          type: String
      },

      /**
       * Set to true to show a character counter.
       */
      charCounter: {
          type: Boolean,
          value: false
      },

      /**
       * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
       * `noLabelFloat` property.
       */
      noLabelFloat: {
          type: Boolean,
          value: false,
          notify: true,
      },

      /**
       * Set to true to always float the label. Bind this to the `<paper-input-container>`'s
       * `alwaysFloatLabel` property.
       */
      alwaysFloatLabel: {
          type: Boolean,
          value: false
      },

      /**
       * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
       * `autoValidate` property.
       */
      autoValidate: {
          type: Boolean,
          value: false
      },

      /**
       * Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
       * property.
       */
      validator: {
          type: String
      },

      // HTMLInputElement attributes for binding if needed

      /**
       * Bind this to the `<input is="iron-input">`'s `autocomplete` property.
       */
      autocomplete: {
          type: String,
          value: 'off'
      },

      /**
       * Bind this to the `<input is="iron-input">`'s `autofocus` property.
       */
      autofocus: {
          type: Boolean
      },

      /**
       * Bind this to the `<input is="iron-input">`'s `inputmode` property.
       */
      inputmode: {
          type: String
      },

      /**
       * Bind this to the `<input is="iron-input">`'s `minlength` property.
       */
      minlength: {
          type: Number
      },

      /**
       * Bind this to the `<input is="iron-input">`'s `name` property.
       */
      name: {
          type: String
      },

      /**
       * A placeholder string in addition to the label. If this is set, the label will always float.
       */
      placeholder: {
          type: String,
          // need to set a default so _computeAlwaysFloatLabel is run
          value: ''
      },

      /**
       * Bind this to the `<input is="iron-input">`'s `readonly` property.
       */
      readonly: {
          type: Boolean,
          value: false
      },

      /**
       * Bind this to the `<input is="iron-input">`'s `size` property.
       */
      size: {
          type: Number
      },

      /**
      * Used to mark which suggestion is being previewed (either by hover or by traversing on keyboard)
      */
      suggestionPreviewed: {
          type: Number,
          value: null
      },

      _ariaDescribedBy: {
          type: String,
          value: ''
      },

      /**
       * Display all the options when the input is empty and when the user focus the input.
       */
      displayOptionsOnFocus: {
          type: Boolean,
          value: false
      }

    },

    // Element Lifecycle

    ready: function() {
      // `ready` is called after all elements have been configured, but
      // propagates bottom-up. This element's children are ready, but parents
      // are not.
      //
      // This is the point where you should make modifications to the DOM (when
        // necessary), or kick off any processes the element wants to perform.
    },

    attached: function() {
      // `attached` fires once the element and its parents have been inserted
      // into a document.
      //
      // This is a good place to perform any work related to your element's
      // visual state or active behavior (measuring sizes, beginning animations,
        // loading resources, etc).
    },

    detached: function() {
      // The analog to `attached`, `detached` fires when the element has been
      // removed from a document.
      //
      // Use this to clean up anything you did in `attached`.
    },

    // Element Behavior

    /**
     * Clears the input text
     */
    clear : function() {
      this.$.input.value = '';
      this.$.clear.style.display = 'none';
      this.value = undefined;
      this._hideSuggestionsWrapper();
    },

    /**
     * Hide the suggestions wrapper
     */
    _hideSuggestionsWrapper: function() {
      this.$.suggestionsWrapper.style.display = 'none';
    },


    /**
    * Event fired when user hovers over a suggestion
    */
    _handleSuggestionPreview: function(event){
      this.suggestionPreviewed = event.model.index;
    },

    /**
    * Event fired when user presses a key in the input field.
    * Used to determine if the 'up', 'down', 'right', or 'enter' keys were pressed.
    */
    _handleSuggestionTraversing: function(event){
      if(event.keyCode === 40 || event.keyCode === 38 && this.source.length) { // 'down' (keyCode 40) or 'up' (keyCode 38) key pressed
        // determine which direction user is traversing
        if(event.keyCode === 38) {  // going up
          if(this.suggestionPreviewed === null || this.suggestionPreviewed === 0) {
            this.suggestionPreviewed = this.source.length - 1;
          } else {
            this.suggestionPreviewed --;
          }
        } else {  // going down
          // check if the suggestions are visible
          if(this.suggestionPreviewed !== null && this.suggestionPreviewed < this.source.length - 1) {
            this.suggestionPreviewed ++;
          } else {
            this.suggestionPreviewed = 0;
          }
        }
      } else if(event.keyCode === 13) { // 'enter' key pressed
        if(this.suggestionPreviewed !== null) {
          // selects the currently previewed suggestion
          // simulates a click so that it works with current design
          this.$.suggestionsWrapper.children[this.suggestionPreviewed].click();
        }
      } else if(event.keyCode === 39) { // 'right' key pressed
        // fills in the selected value, but doesn't close the suggestionsWrapper
        if(this.suggestionPreviewed !== null) {
          this.$.input.value = this.source[this.suggestionPreviewed];
        }
      }
    },

    /**
     * Event fired when the user types in the input field.
     *
     * @param {string} event fired
     */
    _handleSuggestions : function(event) {
      // update the suggestions based on the value
      this.value = this.$.input.value;
      var value = event.target.value;

      if (value && value.length > 0) {
        this._handleSuggestionsAux(value);
      } else if(event.keyCode !== 38 && event.keyCode !== 40) { // checks to make sure the 'up' or 'down' keys are not pressed
        this.$.clear.style.display = 'none';
        this._suggestions = [];
      }
    },

    /**
     * Auxiliary event to handle the suggestions.
     *
     * @param {string} event fired
     */
    _handleSuggestionsAux : function(value) {
      // Check if the given value should be processed according to the min length for search
      if (value.length >= this.autocompleteSearchLength) {
        var valueToProcess = value.toLowerCase();

        // Shows the clear button.
        this.$.clear.style.display = 'block';

        // Search for the word in the source properties.
        if(this.source && this.source.length > 0){
          this._suggestions = [];
          var length = this.source.length
          var hasSearchProperty = this.searchProperty != null;
          for(var i = 0; i < length; i++){
            var item = this.source[i];
            if(hasSearchProperty){
              item = this.source[i][this.searchProperty];
            }
            if(item.toLowerCase().indexOf(valueToProcess) != -1){
              // Adds the item to the suggestions list.
              this.push('_suggestions', {text : item , value : this.source[i]});
            }
          }

          if (this._suggestions.length > 0) {
            this.$.suggestionsWrapper.style.display = 'block';
          }
        }
      }
    },

    /**
     * Event fired when the user selects a suggestion
     *
     * @param {Object} event fired
     */
    _selectSuggestion : function(event) {
      var selectedOption = this._suggestions[event.model.index];
      var self = this;

      this.$.input.value = selectedOption.text;
      this.value = selectedOption.value;

      setTimeout(function() {
        self._hideSuggestionsWrapper();
      }, 300);
    },

    _onFocus: function() {
      if (this.displayOptionsOnFocus && (this.value === '' || this.value === undefined)) {
        this.value = '';
        this.autocompleteSearchLength = 0;
        this._handleSuggestionsAux(this.value);
      }
    },

    _onBlur: function(event) {
      var self = this;

      setTimeout(function() {
        self._hideSuggestionsWrapper();

        if (self.value === '') {
          self.clear();
        }
      }, 300);
    },

    /**
     * Return the selected suggestion
     */
    getValue : function() {
      return this.value;
    },


    /**
    * Sets the class for suggestions being previewed.
    */
    setSuggestionClass: function(itemIndex, previewedSuggestion){
      if(itemIndex === previewedSuggestion)   return 'active';
      else                                    return '';
    }

  });
</script>