bootstrap-combobox 1.2

data/README.md

@@ -0,0 +1,32 @@
+# Bootstrap Combobox
+
+We had need of a combobox at work and after looking around at the available options I was not happy with any of them.  The project had all it's styling based on Twitter's Bootstrap, so building on that made sense.
+
+## How to use it
+
+The dependencies are the Bootstrap stylesheet(CSS or LESS) and also the typeahead javascript plugin.  Include them and then the stylesheet(CSS or LESS) and javascript.
+
+Then just activate the plugin on a normal select box(suggest having a blank option first):
+
+    <select class="combobox">
+      <option></option>
+      <option value="PA">Pennsylvania</option>
+      <option value="CT">Connecticut</option>
+      <option value="NY">New York</option>
+      <option value="MD">Maryland</option>
+      <option value="VA">Virginia</option>
+    </select>
+
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $('.combobox').combobox();
+      });
+    </script>
+
+## Live Example
+
+http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html
+
+## Ruby
+
+This is published/publishable as a ruby gem as well.

data/lib/bootstrap-combobox.rb

@@ -0,0 +1,9 @@
+require "bootstrap-combobox/version"
+
+module Bootstrap
+  module Combobox
+    class Engine < ::Rails::Engine
+      # Rails, will you please look in our vendor? kthx
+    end    
+  end
+end

data/lib/bootstrap-combobox/version.rb

@@ -0,0 +1,6 @@
+module Bootstrap
+  module Combobox 
+    # This version is a little arbitrary; at time of this writing source fork is at 1.1-WIP?   
+    VERSION = "1.2"
+  end
+end

data/vendor/assets/javascripts/bootstrap-combobox.js

@@ -0,0 +1,240 @@
+/* =============================================================
+ * bootstrap-combobox.js v1.1.3
+ * =============================================================
+ * Copyright 2012 Daniel Farrell
+ *
+ * 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 Combobox = function ( element, options ) {
+    this.options = $.extend({}, $.fn.combobox.defaults, options)
+    this.$source = $(element)
+    this.$container = this.setup()
+    this.$element = this.$container.find('input[type=text]')
+    this.$target = this.$container.find('input[type=hidden]')
+    this.$button = this.$container.find('.dropdown-toggle')
+    this.$menu = $(this.options.menu).appendTo('body')
+    this.matcher = this.options.matcher || this.matcher
+    this.sorter = this.options.sorter || this.sorter
+    this.highlighter = this.options.highlighter || this.highlighter
+    this.shown = false
+    this.selected = false
+    this.refresh()
+    this.transferAttributes()
+    this.listen()
+  }
+
+  /* NOTE: COMBOBOX EXTENDS BOOTSTRAP-TYPEAHEAD.js
+     ========================================== */
+
+  Combobox.prototype = $.extend({}, $.fn.typeahead.Constructor.prototype, {
+
+    constructor: Combobox
+
+  , setup: function () {
+      var combobox = $(this.options.template)
+      this.$source.before(combobox)
+      this.$source.hide()
+      return combobox
+    }
+
+  , parse: function () {
+      var that = this
+        , map = {}
+        , source = []
+        , selected = false
+      this.$source.find('option').each(function() {
+        var option = $(this)
+        if (option.val() === '') {
+          that.options.placeholder = option.text()
+          return
+        }
+        map[option.text()] = option.val()
+        source.push(option.text())
+        if(option.attr('selected')) selected = option.text()
+      })
+      this.map = map
+      if (selected) {
+        this.$element.val(selected)
+        this.$container.addClass('combobox-selected')
+        this.selected = true
+      }
+      return source
+    }
+
+  , transferAttributes: function() {
+    this.options.placeholder = this.$source.attr('data-placeholder') || this.options.placeholder
+    this.$element.attr('placeholder', this.options.placeholder)
+    this.$target.prop('name', this.$source.prop('name'))
+    this.$target.val(this.$source.val())
+    this.$source.removeAttr('name')  // Remove from source otherwise form will pass parameter twice.
+    this.$element.attr('required', this.$source.attr('required'))
+    this.$element.attr('rel', this.$source.attr('rel'))
+    this.$element.attr('title', this.$source.attr('title'))
+    this.$element.attr('class', this.$source.attr('class'))
+    this.$element.attr('tabindex', this.$source.attr('tabindex'))
+    this.$source.removeAttr('tabindex')
+  }
+
+  , toggle: function () {
+    if (this.$container.hasClass('combobox-selected')) {
+      this.clearTarget()
+      this.triggerChange()
+      this.clearElement()
+    } else {
+      if (this.shown) {
+        this.hide()
+      } else {
+        this.clearElement()
+        this.lookup()
+      }
+    }
+  }
+
+  , clearElement: function () {
+    this.$element.val('').focus()
+  }
+
+  , clearTarget: function () {
+    this.$source.val('')
+    this.$target.val('')
+    this.$container.removeClass('combobox-selected')
+    this.selected = false
+  }
+
+  , triggerChange: function () {
+    this.$source.trigger('change')
+  }
+
+  , refresh: function () {
+    this.source = this.parse()
+    this.options.items = this.source.length
+  }
+
+  // modified typeahead function adding container and target handling
+  , select: function () {
+      var val = this.$menu.find('.active').attr('data-value')
+      this.$element.val(this.updater(val)).trigger('change')
+      this.$source.val(this.map[val]).trigger('change')
+      this.$target.val(this.map[val]).trigger('change')
+      this.$container.addClass('combobox-selected')
+      this.selected = true
+      return this.hide()
+    }
+
+  // modified typeahead function removing the blank handling and source function handling
+  , lookup: function (event) {
+      this.query = this.$element.val()
+      return this.process(this.source)
+    }
+
+  // modified typeahead function adding button handling and remove mouseleave
+  , listen: function () {
+      this.$element
+        .on('focus',    $.proxy(this.focus, this))
+        .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.keydown, this))
+      }
+
+      this.$menu
+        .on('click', $.proxy(this.click, this))
+        .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
+        .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
+
+      this.$button
+        .on('click', $.proxy(this.toggle, this))
+    }
+
+  // modified typeahead function to clear on type and prevent on moving around
+  , keyup: function (e) {
+      switch(e.keyCode) {
+        case 40: // down arrow
+        case 39: // right arrow
+        case 38: // up arrow
+        case 37: // left arrow
+        case 36: // home
+        case 35: // end
+        case 16: // shift
+        case 17: // ctrl
+        case 18: // alt
+          break
+
+        case 9: // tab
+        case 13: // enter
+          if (!this.shown) return
+          this.select()
+          break
+
+        case 27: // escape
+          if (!this.shown) return
+          this.hide()
+          break
+
+        default:
+          this.clearTarget()
+          this.lookup()
+      }
+
+      e.stopPropagation()
+      e.preventDefault()
+  }
+
+  // modified typeahead function to force a match and add a delay on hide
+  , blur: function (e) {
+      var that = this
+      this.focused = false
+      var val = this.$element.val()
+      if (!this.selected && val !== '' ) {
+        this.$element.val('')
+        this.$source.val('').trigger('change')
+        this.$target.val('').trigger('change')
+      }
+      if (!this.mousedover && this.shown) setTimeout(function () { that.hide() }, 200)
+    }
+
+  // modified typeahead function to not hide
+  , mouseleave: function (e) {
+      this.mousedover = false
+    }
+  })
+
+  /* COMBOBOX PLUGIN DEFINITION
+   * =========================== */
+
+  $.fn.combobox = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('combobox')
+        , options = typeof option == 'object' && option
+      if(!data) $this.data('combobox', (data = new Combobox(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.combobox.defaults = {
+  template: '<div class="combobox-container"><input type="hidden" /><input type="text" autocomplete="off" /><span class="add-on btn dropdown-toggle" data-dropdown="dropdown"><span class="caret"/><span class="combobox-clear"><i class="icon-remove"/></span></span></div>'
+  , menu: '<ul class="typeahead typeahead-long dropdown-menu"></ul>'
+  , item: '<li><a href="#"></a></li>'
+  }
+
+  $.fn.combobox.Constructor = Combobox
+
+}( window.jQuery );

data/vendor/assets/stylesheets/bootstrap-combobox.css

@@ -0,0 +1,150 @@
+.combobox-container {
+  margin-bottom: 5px;
+  *zoom: 1;
+}
+.combobox-container:before,
+.combobox-container:after {
+  display: table;
+  content: "";
+}
+.combobox-container:after {
+  clear: both;
+}
+.combobox-container input,
+.combobox-container .uneditable-input {
+  -webkit-border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+.combobox-container input:focus,
+.combobox-container .uneditable-input:focus {
+  position: relative;
+  z-index: 2;
+}
+.combobox-container .uneditable-input {
+  border-left-color: #ccc;
+}
+.combobox-container .add-on {
+  float: left;
+  display: inline-block;
+  width: auto;
+  min-width: 16px;
+  height: inherit !important;
+  margin-right: -1px;
+  padding: 4px 5px;
+  font-weight: normal;
+  color: #999999;
+  text-align: center;
+  text-shadow: 0 1px 0 #ffffff;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+  
+}
+.combobox-container .active {
+  background-color: #a9dba9;
+  border-color: #46a546;
+}
+.combobox-container input,
+.combobox-container .uneditable-input {
+  float: left;
+  -webkit-border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+}
+.combobox-container .uneditable-input {
+  border-left-color: #eee;
+  border-right-color: #ccc;
+}
+.combobox-container .add-on {
+  margin-right: 0;
+  margin-left: -1px;
+  -webkit-border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+.combobox-container input:first-child {
+  *margin-left: -160px;
+}
+.combobox-container input:first-child + .add-on {
+  *margin-left: -21px;
+}
+.combobox-container select {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  text-indent: -99999px;
+  *text-indent: 0;
+}
+.form-search .combobox-container,
+.form-inline .combobox-container {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: top;
+}
+.form-search .combobox-container .add-on,
+.form-inline .combobox-container .add-on {
+  vertical-align: middle;
+}
+.combobox-selected .combobox-clear {
+  display: inline-block;
+}
+.combobox-selected .caret {
+  display: none;
+}
+.combobox-clear {
+  display: none;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  vertical-align: top;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+.dropdown:hover .combobox-clear,
+.open.dropdown .combobox-clear {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.btn .combobox-clear {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+.btn:hover .combobox-clear,
+.open.btn-group .combobox-clear {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.typeahead-long {
+  max-height: 300px;
+  overflow-y: auto;
+}
+.control-group.error .combobox-container .add-on {
+  color: #B94A48;
+  border-color: #B94A48;
+}
+.control-group.error .combobox-container .caret {
+  border-top-color: #B94A48;
+}
+.control-group.warning .combobox-container .add-on {
+  color: #C09853;
+  border-color: #C09853;
+}
+.control-group.warning .combobox-container .caret {
+  border-top-color: #C09853;
+}
+.control-group.success .combobox-container .add-on {
+  color: #468847;
+  border-color: #468847;
+}
+.control-group.success .combobox-container .caret {
+  border-top-color: #468847;
+}
+.btn .combobox-clear [class^="icon-"] {
+  line-height: 1.4em;
+}

metadata

@@ -0,0 +1,69 @@
+--- !ruby/object:Gem::Specification
+name: bootstrap-combobox
+version: !ruby/object:Gem::Version
+  version: '1.2'
+  prerelease: 
+platform: ruby
+authors:
+- danielfarrell
+- denishaskin
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-07-22 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+description: Combobox for Bootstrap, based on Bootstrap typeahead
+email:
+- danielfarrell76@gmail.com
+- denis@constantorbit.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/bootstrap-combobox/version.rb
+- lib/bootstrap-combobox.rb
+- vendor/assets/javascripts/bootstrap-combobox.js
+- vendor/assets/stylesheets/bootstrap-combobox.css
+- README.md
+homepage: https://github.com/danielfarrell/bootstrap-combobox
+licenses:
+- MIT
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.25
+signing_key: 
+specification_version: 3
+summary: Combobox for Bootstrap, based on Bootstrap typeahead
+test_files: []