https://fae.edu/js_connect/bootstrap-typeahead.js

1/* =============================================================
2 * bootstrap-typeahead.js v2.0.4
3 * http://twitter.github.com/bootstrap/javascript.html#typeahead
4 * =============================================================
5 * Copyright 2012 Twitter, Inc.
6 *
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
10 *
11 * http://www.apache.org/licenses/LICENSE-2.0
12 *
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============================================================ */
19
20
21!function($){
22
23  "use strict"; // jshint ;_;
24
25
26 /* TYPEAHEAD PUBLIC CLASS DEFINITION
27  * ================================= */
28
29  var Typeahead = function (element, options) {
30    this.$element = $(element)
31    this.options = $.extend({}, $.fn.typeahead.defaults, options)
32    this.matcher = this.options.matcher || this.matcher
33    this.sorter = this.options.sorter || this.sorter
34    this.highlighter = this.options.highlighter || this.highlighter
35    this.updater = this.options.updater || this.updater
36    this.$menu = $(this.options.menu).appendTo('body')
37    this.source = this.options.source
38    this.shown = false
39    this.listen()
40  }
41
42  Typeahead.prototype = {
43
44    constructor: Typeahead
45
46  , select: function () {
47      var val = this.$menu.find('.active').attr('data-value')
48      this.$element
49        .val(this.updater(val))
50        .change()
51      return this.hide()
52    }
53
54  , updater: function (item) {
55      return item
56    }
57
58  , show: function () {
59      var pos = $.extend({}, this.$element.offset(), {
60        height: this.$element[0].offsetHeight
61      })
62
63      this.$menu.css({
64        top: pos.top + pos.height
65      , left: pos.left
66      })
67
68      this.$menu.show()
69      this.shown = true
70      return this
71    }
72
73  , hide: function () {
74      this.$menu.hide()
75      this.shown = false
76      return this
77    }
78
79  , lookup: function (event) {
80      var that = this
81        , items
82        , q
83
84      this.query = this.$element.val()
85
86      if (!this.query) {
87        return this.shown ? this.hide() : this
88      }
89
90      items = $.grep(this.source, function (item) {
91        return that.matcher(item)
92      })
93
94      items = this.sorter(items)
95
96      if (!items.length) {
97        return this.shown ? this.hide() : this
98      }
99
100      return this.render(items.slice(0, this.options.items)).show()
101    }
102
103  , matcher: function (item) {
104      return ~item.toLowerCase().indexOf(this.query.toLowerCase())
105    }
106
107  , sorter: function (items) {
108      var beginswith = []
109        , caseSensitive = []
110        , caseInsensitive = []
111        , item
112
113      while (item = items.shift()) {
114        if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
115        else if (~item.indexOf(this.query)) caseSensitive.push(item)
116        else caseInsensitive.push(item)
117      }
118
119      return beginswith.concat(caseSensitive, caseInsensitive)
120    }
121
122  , highlighter: function (item) {
123      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
124      return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
125        return '<strong>' + match + '</strong>'
126      })
127    }
128
129  , render: function (items) {
130      var that = this
131
132      items = $(items).map(function (i, item) {
133        i = $(that.options.item).attr('data-value', item)
134        i.find('a').html(that.highlighter(item))
135        return i[0]
136      })
137
138      items.first().addClass('active')
139      this.$menu.html(items)
140      return this
141    }
142
143  , next: function (event) {
144      var active = this.$menu.find('.active').removeClass('active')
145        , next = active.next()
146
147      if (!next.length) {
148        next = $(this.$menu.find('li')[0])
149      }
150
151      next.addClass('active')
152    }
153
154  , prev: function (event) {
155      var active = this.$menu.find('.active').removeClass('active')
156        , prev = active.prev()
157
158      if (!prev.length) {
159        prev = this.$menu.find('li').last()
160      }
161
162      prev.addClass('active')
163    }
164
165  , listen: function () {
166      this.$element
167        .on('blur',     $.proxy(this.blur, this))
168        .on('keypress', $.proxy(this.keypress, this))
169        .on('keyup',    $.proxy(this.keyup, this))
170
171      if ($.browser.webkit || $.browser.msie) {
172        this.$element.on('keydown', $.proxy(this.keypress, this))
173      }
174
175      this.$menu
176        .on('click', $.proxy(this.click, this))
177        .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
178    }
179
180  , keyup: function (e) {
181      switch(e.keyCode) {
182        case 40: // down arrow
183        case 38: // up arrow
184          break
185
186        case 9: // tab
187        case 13: // enter
188          if (!this.shown) return
189          this.select()
190          break
191
192        case 27: // escape
193          if (!this.shown) return
194          this.hide()
195          break
196
197        default:
198          this.lookup()
199      }
200
201      e.stopPropagation()
202      e.preventDefault()
203  }
204
205  , keypress: function (e) {
206      if (!this.shown) return
207
208      switch(e.keyCode) {
209        case 9: // tab
210        case 13: // enter
211        case 27: // escape
212          e.preventDefault()
213          break
214
215        case 38: // up arrow
216          if (e.type != 'keydown') break
217          e.preventDefault()
218          this.prev()
219          break
220
221        case 40: // down arrow
222          if (e.type != 'keydown') break
223          e.preventDefault()
224          this.next()
225          break
226      }
227
228      e.stopPropagation()
229    }
230
231  , blur: function (e) {
232      var that = this
233      setTimeout(function () { that.hide() }, 150)
234    }
235
236  , click: function (e) {
237      e.stopPropagation()
238      e.preventDefault()
239      this.select()
240    }
241
242  , mouseenter: function (e) {
243      this.$menu.find('.active').removeClass('active')
244      $(e.currentTarget).addClass('active')
245    }
246
247  }
248
249
250  /* TYPEAHEAD PLUGIN DEFINITION
251   * =========================== */
252
253  $.fn.typeahead = function (option) {
254    return this.each(function () {
255      var $this = $(this)
256        , data = $this.data('typeahead')
257        , options = typeof option == 'object' && option
258      if (!data) $this.data('typeahead', (data = new Typeahead(this, options)))
259      if (typeof option == 'string') data[option]()
260    })
261  }
262
263  $.fn.typeahead.defaults = {
264    source: []
265  , items: 8
266  , menu: '<ul class="typeahead dropdown-menu"></ul>'
267  , item: '<li><a href="#"></a></li>'
268  }
269
270  $.fn.typeahead.Constructor = Typeahead
271
272
273 /* TYPEAHEAD DATA-API
274  * ================== */
275
276  $(function () {