/* ============================================================= * bootstrap-typeahead.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#typeahead * ============================================================= * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ============================================================ */ !function( $ ){ "use strict" var Typeahead = function ( element, options ) { this.$element = $(element) this.options = $.extend({}, $.fn.typeahead.defaults, options) this.matcher = this.options.matcher || this.matcher this.sorter = this.options.sorter || this.sorter this.highlighter = this.options.highlighter || this.highlighter this.$menu = $(this.options.menu).appendTo('body') if (this.options.scroll) this.$menu.addClass('scroll'); this.source = this.options.source this.onselect = this.options.onselect this.strings = true this.shown = false this.deferred = null this.listen() } Typeahead.prototype = { constructor: Typeahead , select: function (e) { var val = JSON.parse(this.$menu.find('.active').attr('data-value')) , text if (!this.strings) text = val[this.options.property] else text = val this.$element.val(text) if (typeof this.onselect == "function") if (false === this.onselect(val, e)) return; return this.hide() } , show: function () { var pos = $.extend({}, this.$element.offset(), { height: this.$element[0].offsetHeight }) this.$menu.css({ top: pos.top + pos.height , left: pos.left }) this.$menu.show() this.shown = true return this } , hide: function () { this.$menu.hide() this.shown = false return this } , fetch: function() { var value = this.source(this, this.query) if (value) this.process(value) } , lookup: function (event) { var that = this , items , q , value this.query = this.$element.val(); /*Check if we have a match on the current source?? */ if (typeof this.source == "function") { if (!this.options.delay) return this.fetch() if (this.deferred) clearTimeout(this.deferred) this.deferred = setTimeout(this.fetch.bind(this), this.options.delay) } else { this.process(this.source) } } , process: function (results) { var that = this , items , q if (results.length && typeof results[0] != "string") this.strings = false this.query = this.$element.val() if (this.query.length < this.options.minLength) { return this.shown ? this.hide() : this } items = $.grep(results, function (item) { if (!that.strings) item = item[that.options.property] if (that.matcher(item)) return item }) items = this.sorter(items) if (!items.length) { return this.shown ? this.hide() : this } return this.render(items.slice(0, this.options.items)).show() } , matcher: function (item) { return ~item.toLowerCase().indexOf(this.query.toLowerCase()) } , sorter: function (items) { var beginswith = [] , caseSensitive = [] , caseInsensitive = [] , item , sortby while (item = items.shift()) { if (this.strings) sortby = item else sortby = item[this.options.property] if (!sortby.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item) else if (~sortby.indexOf(this.query)) caseSensitive.push(item) else caseInsensitive.push(item) } return beginswith.concat(caseSensitive, caseInsensitive) } , highlighter: function (item) { if (!this.query) return item; var exp = this.query.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&").replace(' ', '|') return item.replace(new RegExp(exp, 'ig'), '$&') } , render: function (items) { var that = this items = $(items).map(function (i, item) { var orig = item; i = $(that.options.item).attr('data-value', JSON.stringify(item)) if (!that.strings) { if(item[that.options.render]) item = item[that.options.render]; else item = item[that.options.property]; } i.find('a').html(that.highlighter(item, orig)) return i[0] }) items.first().addClass('active') this.$menu.html(items) return this } , adjustScroll: function(next) { var top = this.$menu.scrollTop(), bottom = top + this.$menu.height(), pos = next.position(); if (pos.top < 0) this.$menu.scrollTop(top + pos.top - 10); else if (next.height() + top + pos.top > bottom) this.$menu.scrollTop(top + pos.top - this.$menu.height() + next.height() + 10); } , next: function (event) { var active = this.$menu.find('.active').removeClass('active') , next = active.next() if (!next.length) { next = $(this.$menu.find('li')[0]) } next.addClass('active') if (this.options.scroll) { this.adjustScroll(next); } } , prev: function (event) { var active = this.$menu.find('.active').removeClass('active') , prev = active.prev() if (!prev.length) { prev = this.$menu.find('li').last() } prev.addClass('active') if (this.options.scroll) { this.adjustScroll(prev); } } , listen: function () { this.$element .on('blur', $.proxy(this.blur, this)) .on('keypress', $.proxy(this.keypress, this)) .on('keyup', $.proxy(this.keyup, this)) if (this.eventSupported('keydown')) { this.$element.on('keydown', $.proxy(this.keypress, this)) } this.$menu .on('click', $.proxy(this.click, this)) .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) } , eventSupported: function(eventName) { var isSupported = eventName in this.$element if (!isSupported) { this.$element.setAttribute(eventName, 'return;') isSupported = typeof this.$element[eventName] === 'function' } return isSupported } , keyup: function (e) { e.stopPropagation() e.preventDefault() switch(e.keyCode) { case 40: // down arrow case 38: // up arrow break case 9: // tab case 13: // enter if (!this.shown) return this.select(e) break case 27: // escape this.hide() break default: this.lookup() } } , keypress: function (e) { e.stopPropagation() if (!this.shown) return switch(e.keyCode) { case 9: // tab case 13: // enter case 27: // escape e.preventDefault() break case 38: // up arrow e.preventDefault() this.prev() break case 40: // down arrow e.preventDefault() this.next() break } } , blur: function (e) { var that = this e.stopPropagation() e.preventDefault() setTimeout(function () { that.hide() }, 150) } , click: function (e) { e.stopPropagation() e.preventDefault() this.select(e) } , mouseenter: function (e) { this.$menu.find('.active').removeClass('active') $(e.currentTarget).addClass('active') } , visible: function() { return this.shown; } } /* TYPEAHEAD PLUGIN DEFINITION * =========================== */ $.fn.typeahead = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('typeahead') , options = typeof option == 'object' && option if (!data) $this.data('typeahead', (data = new Typeahead(this, options))) if (typeof option == 'string') data[option]() }) } $.fn.typeahead.defaults = { source: [] , items: 8 , menu: '' , item: '
  • ' , onselect: null , property: 'value' , render: 'info' , minLength: 1 , scroll: false , delay: 200 } $.fn.typeahead.Constructor = Typeahead /* TYPEAHEAD DATA-API * ================== */ $(function () { $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { var $this = $(this) if ($this.data('typeahead')) return e.preventDefault() $this.typeahead($this.data()) }) }) }( window.jQuery );