autocomplete/src/input.js at master · meloonly/autocomplete · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var $ = require('jquery');
var Base = require('arale-base');

var lteIE9 = /\bMSIE [6789]\.0\b/.test(navigator.userAgent);
var specialKeyCodeMap = {
  9: 'tab',
  27: 'esc',
  37: 'left',
  39: 'right',
  13: 'enter',
  38: 'up',
  40: 'down'
};

var Input = Base.extend({

  attrs: {
    element: {
      value: null,
      setter: function (val) {
        return $(val);
      }
    },
    query: null,
    delay: 100
  },

  initialize: function () {
    Input.superclass.initialize.apply(this, arguments);

    // bind events
    this._bindEvents();

    // init query
    this.set('query', this.getValue());
  },

  focus: function () {
    this.get('element').focus();
  },

  getValue: function () {
    return this.get('element').val();
  },

  setValue: function (val, silent) {
    this.get('element').val(val);
    !silent && this._change();
  },

  destroy: function () {
    Input.superclass.destroy.call(this);
  },

  _bindEvents: function () {
    var timer, input = this.get('element');

    input.attr('autocomplete', 'off').on('focus.autocomplete', wrapFn(this._handleFocus, this)).on('blur.autocomplete', wrapFn(this._handleBlur, this)).on('keydown.autocomplete', wrapFn(this._handleKeydown, this));

    // IE678 don't support input event
    // IE 9 does not fire an input event when the user removes characters from input filled by keyboard, cut, or drag operations.
    if (!lteIE9) {
      input.on('input.autocomplete', wrapFn(this._change, this));
    } else {
      var that = this,
          events = ['keydown.autocomplete', 'keypress.autocomplete', 'cut.autocomplete', 'paste.autocomplete'].join(' ');

      input.on(events, wrapFn(function (e) {
        if (specialKeyCodeMap[e.which]) return;

        clearTimeout(timer);
        timer = setTimeout(function () {
          that._change.call(that, e);
        }, this.get('delay'));
      }, this));
    }
  },

  _change: function () {
    var newVal = this.getValue();
    var oldVal = this.get('query');
    var isSame = compare(oldVal, newVal);
    var isSameExpectWhitespace = isSame ? (newVal.length !== oldVal.length) : false;

    if (isSameExpectWhitespace) {
      this.trigger('whitespaceChanged', oldVal);
    }
    if (!isSame) {
      this.set('query', newVal);
      this.trigger('queryChanged', newVal, oldVal);
    }
  },

  _handleFocus: function (e) {
    this.trigger('focus', e);
  },

  _handleBlur: function (e) {
    this.trigger('blur', e);
  },

  _handleKeydown: function (e) {
    var keyName = specialKeyCodeMap[e.which];
    if (keyName) {
      var eventKey = 'key' + ucFirst(keyName);
      this.trigger(e.type = eventKey, e);
    }
  }
});

module.exports = Input;

function wrapFn(fn, context) {
  return function () {
    fn.apply(context, arguments);
  };
}

function compare(a, b) {
  a = (a || '').replace(/^\s*/g, '').replace(/\s{2,}/g, ' ');
  b = (b || '').replace(/^\s*/g, '').replace(/\s{2,}/g, ' ');
  return a === b;
}

function ucFirst(str) {
  return str.charAt(0).toUpperCase() + str.substring(1);
}