[Summary view] [Print] [Text view]

   1  /* =============================================================
   2   * bootstrap-typeahead.js v2.0.1
   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  !function( $ ){
  21  
  22    "use strict"
  23  
  24    var Typeahead = function ( element, options ) {
  25      this.$element = $(element)
  26      this.options = $.extend({}, $.fn.typeahead.defaults, options)
  27      this.matcher = this.options.matcher || this.matcher
  28      this.sorter = this.options.sorter || this.sorter
  29      this.highlighter = this.options.highlighter || this.highlighter
  30      this.$menu = $(this.options.menu).appendTo('body')
  31      this.source = this.options.source
  32      this.shown = false
  33      this.listen()
  34    }
  35  
  36    Typeahead.prototype = {
  37  
  38      constructor: Typeahead
  39  
  40    , select: function () {
  41        var val = this.$menu.find('.active').attr('data-value')
  42        this.$element.val(val)
  43        return this.hide()
  44      }
  45  
  46    , show: function () {
  47        var pos = $.extend({}, this.$element.offset(), {
  48          height: this.$element[0].offsetHeight
  49        })
  50  
  51        this.$menu.css({
  52          top: pos.top + pos.height
  53        , left: pos.left
  54        })
  55  
  56        this.$menu.show()
  57        this.shown = true
  58        return this
  59      }
  60  
  61    , hide: function () {
  62        this.$menu.hide()
  63        this.shown = false
  64        return this
  65      }
  66  
  67    , lookup: function (event) {
  68        var that = this
  69          , items
  70          , q
  71  
  72        this.query = this.$element.val()
  73  
  74        if (!this.query) {
  75          return this.shown ? this.hide() : this
  76        }
  77  
  78        items = $.grep(this.source, function (item) {
  79          if (that.matcher(item)) return item
  80        })
  81  
  82        items = this.sorter(items)
  83  
  84        if (!items.length) {
  85          return this.shown ? this.hide() : this
  86        }
  87  
  88        return this.render(items.slice(0, this.options.items)).show()
  89      }
  90  
  91    , matcher: function (item) {
  92        return ~item.toLowerCase().indexOf(this.query.toLowerCase())
  93      }
  94  
  95    , sorter: function (items) {
  96        var beginswith = []
  97          , caseSensitive = []
  98          , caseInsensitive = []
  99          , item
 100  
 101        while (item = items.shift()) {
 102          if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
 103          else if (~item.indexOf(this.query)) caseSensitive.push(item)
 104          else caseInsensitive.push(item)
 105        }
 106  
 107        return beginswith.concat(caseSensitive, caseInsensitive)
 108      }
 109  
 110    , highlighter: function (item) {
 111        return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
 112          return '<strong>' + match + '</strong>'
 113        })
 114      }
 115  
 116    , render: function (items) {
 117        var that = this
 118  
 119        items = $(items).map(function (i, item) {
 120          i = $(that.options.item).attr('data-value', item)
 121          i.find('a').html(that.highlighter(item))
 122          return i[0]
 123        })
 124  
 125        items.first().addClass('active')
 126        this.$menu.html(items)
 127        return this
 128      }
 129  
 130    , next: function (event) {
 131        var active = this.$menu.find('.active').removeClass('active')
 132          , next = active.next()
 133  
 134        if (!next.length) {
 135          next = $(this.$menu.find('li')[0])
 136        }
 137  
 138        next.addClass('active')
 139      }
 140  
 141    , prev: function (event) {
 142        var active = this.$menu.find('.active').removeClass('active')
 143          , prev = active.prev()
 144  
 145        if (!prev.length) {
 146          prev = this.$menu.find('li').last()
 147        }
 148  
 149        prev.addClass('active')
 150      }
 151  
 152    , listen: function () {
 153        this.$element
 154          .on('blur',     $.proxy(this.blur, this))
 155          .on('keypress', $.proxy(this.keypress, this))
 156          .on('keyup',    $.proxy(this.keyup, this))
 157  
 158        if ($.browser.webkit || $.browser.msie) {
 159          this.$element.on('keydown', $.proxy(this.keypress, this))
 160        }
 161  
 162        this.$menu
 163          .on('click', $.proxy(this.click, this))
 164          .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
 165      }
 166  
 167    , keyup: function (e) {
 168        e.stopPropagation()
 169        e.preventDefault()
 170  
 171        switch(e.keyCode) {
 172          case 40: // down arrow
 173          case 38: // up arrow
 174            break
 175  
 176          case 9: // tab
 177          case 13: // enter
 178            if (!this.shown) return
 179            this.select()
 180            break
 181  
 182          case 27: // escape
 183            this.hide()
 184            break
 185  
 186          default:
 187            this.lookup()
 188        }
 189  
 190    }
 191  
 192    , keypress: function (e) {
 193        e.stopPropagation()
 194        if (!this.shown) return
 195  
 196        switch(e.keyCode) {
 197          case 9: // tab
 198          case 13: // enter
 199          case 27: // escape
 200            e.preventDefault()
 201            break
 202  
 203          case 38: // up arrow
 204            e.preventDefault()
 205            this.prev()
 206            break
 207  
 208          case 40: // down arrow
 209            e.preventDefault()
 210            this.next()
 211            break
 212        }
 213      }
 214  
 215    , blur: function (e) {
 216        var that = this
 217        e.stopPropagation()
 218        e.preventDefault()
 219        setTimeout(function () { that.hide() }, 150)
 220      }
 221  
 222    , click: function (e) {
 223        e.stopPropagation()
 224        e.preventDefault()
 225        this.select()
 226      }
 227  
 228    , mouseenter: function (e) {
 229        this.$menu.find('.active').removeClass('active')
 230        $(e.currentTarget).addClass('active')
 231      }
 232  
 233    }
 234  
 235  
 236    /* TYPEAHEAD PLUGIN DEFINITION
 237     * =========================== */
 238  
 239    $.fn.typeahead = function ( option ) {
 240      return this.each(function () {
 241        var $this = $(this)
 242          , data = $this.data('typeahead')
 243          , options = typeof option == 'object' && option
 244        if (!data) $this.data('typeahead', (data = new Typeahead(this, options)))
 245        if (typeof option == 'string') data[option]()
 246      })
 247    }
 248  
 249    $.fn.typeahead.defaults = {
 250      source: []
 251    , items: 8
 252    , menu: '<ul class="typeahead dropdown-menu"></ul>'
 253    , item: '<li><a href="#"></a></li>'
 254    }
 255  
 256    $.fn.typeahead.Constructor = Typeahead
 257  
 258  
 259   /* TYPEAHEAD DATA-API
 260    * ================== */
 261  
 262    $(function () {
 263      $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
 264        var $this = $(this)
 265        if ($this.data('typeahead')) return
 266        e.preventDefault()
 267        $this.typeahead($this.data())
 268      })
 269    })
 270  
 271  }( window.jQuery );