bootstrap-combobox-rails 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/LICENSE.txt +22 -0
- data/README.md +31 -0
- data/lib/bootstrap-combobox-rails.rb +11 -0
- data/lib/bootstrap-combobox-rails/version.rb +7 -0
- data/vendor/assets/README.md +28 -0
- data/vendor/assets/javascripts/bootstrap-combobox.js +243 -0
- data/vendor/assets/javascripts/tests/index.html +31 -0
- data/vendor/assets/javascripts/tests/unit/bootstrap-combobox.js +297 -0
- data/vendor/assets/javascripts/tests/vendor/bootstrap-typeahead.js +335 -0
- data/vendor/assets/javascripts/tests/vendor/jquery.js +9597 -0
- data/vendor/assets/javascripts/tests/vendor/qunit.css +244 -0
- data/vendor/assets/javascripts/tests/vendor/qunit.js +2152 -0
- data/vendor/assets/less/combobox.less +102 -0
- data/vendor/assets/stylesheets/bootstrap-combobox.css +150 -0
- metadata +76 -0
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 denishaskin
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
# Bootstrap::Combobox::Rails
|
2
|
+
|
3
|
+
Simple wrapping of bootstrap-combobox in a gem for easy deployment & maintenance. Note this uses a forked version of bootstrap-combobox
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
gem 'bootstrap-combobox-rails'
|
10
|
+
|
11
|
+
And then execute:
|
12
|
+
|
13
|
+
$ bundle
|
14
|
+
|
15
|
+
Or install it yourself as:
|
16
|
+
|
17
|
+
$ gem install bootstrap-combobox-rails
|
18
|
+
|
19
|
+
## Usage
|
20
|
+
|
21
|
+
TODO: Verify these instructions:
|
22
|
+
|
23
|
+
None? The .js and .css will get included automatically?
|
24
|
+
|
25
|
+
## Contributing
|
26
|
+
|
27
|
+
1. Fork it
|
28
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
29
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
30
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
31
|
+
5. Create new Pull Request
|
@@ -0,0 +1,28 @@
|
|
1
|
+
# Bootstrap Combobox
|
2
|
+
|
3
|
+
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.
|
4
|
+
|
5
|
+
## How to use it
|
6
|
+
|
7
|
+
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.
|
8
|
+
|
9
|
+
Then just activate the plugin on a normal select box(suggest having a blank option first):
|
10
|
+
|
11
|
+
<select class="combobox">
|
12
|
+
<option></option>
|
13
|
+
<option value="PA">Pennsylvania</option>
|
14
|
+
<option value="CT">Connecticut</option>
|
15
|
+
<option value="NY">New York</option>
|
16
|
+
<option value="MD">Maryland</option>
|
17
|
+
<option value="VA">Virginia</option>
|
18
|
+
</select>
|
19
|
+
|
20
|
+
<script type="text/javascript">
|
21
|
+
$(document).ready(function(){
|
22
|
+
$('.combobox').combobox();
|
23
|
+
});
|
24
|
+
</script>
|
25
|
+
|
26
|
+
## Live Example
|
27
|
+
|
28
|
+
http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html
|
@@ -0,0 +1,243 @@
|
|
1
|
+
/* =============================================================
|
2
|
+
* bootstrap-combobox.js v1.1.1
|
3
|
+
* =============================================================
|
4
|
+
* Copyright 2012 Daniel Farrell
|
5
|
+
*
|
6
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
7
|
+
* you may not use this file except in compliance with the License.
|
8
|
+
* You may obtain a copy of the License at
|
9
|
+
*
|
10
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
11
|
+
*
|
12
|
+
* Unless required by applicable law or agreed to in writing, software
|
13
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
14
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
15
|
+
* See the License for the specific language governing permissions and
|
16
|
+
* limitations under the License.
|
17
|
+
* ============================================================ */
|
18
|
+
|
19
|
+
!function( $ ) {
|
20
|
+
|
21
|
+
"use strict";
|
22
|
+
|
23
|
+
var Combobox = function ( element, options ) {
|
24
|
+
this.options = $.extend({}, $.fn.combobox.defaults, options)
|
25
|
+
this.$source = $(element)
|
26
|
+
this.$container = this.setup()
|
27
|
+
this.$element = this.$container.find('input[type=text]')
|
28
|
+
this.$target = this.$container.find('input[type=hidden]')
|
29
|
+
this.$button = this.$container.find('.dropdown-toggle')
|
30
|
+
this.$menu = $(this.options.menu).appendTo('body')
|
31
|
+
this.matcher = this.options.matcher || this.matcher
|
32
|
+
this.sorter = this.options.sorter || this.sorter
|
33
|
+
this.highlighter = this.options.highlighter || this.highlighter
|
34
|
+
this.shown = false
|
35
|
+
this.selected = false
|
36
|
+
this.refresh()
|
37
|
+
this.transferAttributes()
|
38
|
+
this.listen()
|
39
|
+
}
|
40
|
+
|
41
|
+
/* NOTE: COMBOBOX EXTENDS BOOTSTRAP-TYPEAHEAD.js
|
42
|
+
========================================== */
|
43
|
+
|
44
|
+
Combobox.prototype = $.extend({}, $.fn.typeahead.Constructor.prototype, {
|
45
|
+
|
46
|
+
constructor: Combobox
|
47
|
+
|
48
|
+
, setup: function () {
|
49
|
+
var combobox = $(this.options.template)
|
50
|
+
this.$source.before(combobox)
|
51
|
+
this.$source.hide()
|
52
|
+
return combobox
|
53
|
+
}
|
54
|
+
|
55
|
+
, parse: function () {
|
56
|
+
var that = this
|
57
|
+
, map = {}
|
58
|
+
, source = []
|
59
|
+
, selected = false
|
60
|
+
this.$source.find('option').each(function() {
|
61
|
+
var option = $(this)
|
62
|
+
if (option.val() === '') {
|
63
|
+
that.options.placeholder = option.text()
|
64
|
+
return
|
65
|
+
}
|
66
|
+
map[option.text()] = option.val()
|
67
|
+
source.push(option.text())
|
68
|
+
if(option.attr('selected')) selected = option.html()
|
69
|
+
})
|
70
|
+
this.map = map
|
71
|
+
if (selected) {
|
72
|
+
this.$element.val(selected)
|
73
|
+
this.$container.addClass('combobox-selected')
|
74
|
+
this.selected = true
|
75
|
+
}
|
76
|
+
return source
|
77
|
+
}
|
78
|
+
|
79
|
+
, transferAttributes: function() {
|
80
|
+
this.options.placeholder = this.$source.attr('data-placeholder') || this.options.placeholder
|
81
|
+
this.$element.attr('placeholder', this.options.placeholder)
|
82
|
+
this.$target.prop('name', this.$source.prop('name'))
|
83
|
+
this.$target.val(this.$source.val())
|
84
|
+
this.$source.removeAttr('name') // Remove from source otherwise form will pass parameter twice.
|
85
|
+
this.$element.attr('required', this.$source.attr('required'))
|
86
|
+
this.$element.attr('rel', this.$source.attr('rel'))
|
87
|
+
this.$element.attr('title', this.$source.attr('title'))
|
88
|
+
this.$element.attr('class', this.$source.attr('class'))
|
89
|
+
}
|
90
|
+
|
91
|
+
, toggle: function () {
|
92
|
+
if (this.$container.hasClass('combobox-selected')) {
|
93
|
+
this.clearTarget()
|
94
|
+
this.triggerChange()
|
95
|
+
this.clearElement()
|
96
|
+
} else {
|
97
|
+
if (this.shown) {
|
98
|
+
this.hide()
|
99
|
+
} else {
|
100
|
+
this.clearElement()
|
101
|
+
this.lookup()
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
106
|
+
, clearElement: function () {
|
107
|
+
this.$element.val('').focus()
|
108
|
+
}
|
109
|
+
|
110
|
+
, clearTarget: function () {
|
111
|
+
this.$source.val('')
|
112
|
+
this.$target.val('')
|
113
|
+
this.$container.removeClass('combobox-selected')
|
114
|
+
this.selected = false
|
115
|
+
}
|
116
|
+
|
117
|
+
, triggerChange: function () {
|
118
|
+
this.$source.trigger('change')
|
119
|
+
}
|
120
|
+
|
121
|
+
, refresh: function () {
|
122
|
+
this.source = this.parse()
|
123
|
+
this.options.items = this.source.length
|
124
|
+
}
|
125
|
+
|
126
|
+
// modified typeahead function adding container and target handling
|
127
|
+
, select: function () {
|
128
|
+
var val = this.$menu.find('.active').attr('data-value')
|
129
|
+
this.$element.val(this.updater(val)).trigger('change')
|
130
|
+
this.$source.val(this.map[val]).trigger('change')
|
131
|
+
this.$target.val(this.map[val]).trigger('change')
|
132
|
+
this.$container.addClass('combobox-selected')
|
133
|
+
this.selected = true
|
134
|
+
return this.hide()
|
135
|
+
}
|
136
|
+
|
137
|
+
// modified typeahead function removing the blank handling and source function handling
|
138
|
+
, lookup: function (event) {
|
139
|
+
this.query = this.$element.val()
|
140
|
+
return this.process(this.source)
|
141
|
+
}
|
142
|
+
|
143
|
+
// modified typeahead function adding button handling and remove mouseleave
|
144
|
+
, listen: function () {
|
145
|
+
this.$element
|
146
|
+
.on('focus', $.proxy(this.focus, this))
|
147
|
+
.on('blur', $.proxy(this.blur, this))
|
148
|
+
.on('keypress', $.proxy(this.keypress, this))
|
149
|
+
.on('keyup', $.proxy(this.keyup, this))
|
150
|
+
|
151
|
+
if (this.eventSupported('keydown')) {
|
152
|
+
this.$element.on('keydown', $.proxy(this.keydown, this))
|
153
|
+
}
|
154
|
+
|
155
|
+
this.$menu
|
156
|
+
.on('click', $.proxy(this.click, this))
|
157
|
+
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
158
|
+
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
|
159
|
+
|
160
|
+
this.$button
|
161
|
+
.on('click', $.proxy(this.toggle, this))
|
162
|
+
}
|
163
|
+
|
164
|
+
// modified typeahead function to clear on type and prevent on moving around
|
165
|
+
, keyup: function (e) {
|
166
|
+
switch(e.keyCode) {
|
167
|
+
case 40: // down arrow
|
168
|
+
case 39: // right arrow
|
169
|
+
case 38: // up arrow
|
170
|
+
case 37: // left arrow
|
171
|
+
case 36: // home
|
172
|
+
case 35: // end
|
173
|
+
case 16: // shift
|
174
|
+
case 17: // ctrl
|
175
|
+
case 18: // alt
|
176
|
+
break
|
177
|
+
|
178
|
+
case 9: // tab
|
179
|
+
case 13: // enter
|
180
|
+
if (!this.shown) return
|
181
|
+
this.select()
|
182
|
+
break
|
183
|
+
|
184
|
+
case 27: // escape
|
185
|
+
if (!this.shown) return
|
186
|
+
this.hide()
|
187
|
+
break
|
188
|
+
|
189
|
+
default:
|
190
|
+
this.clearTarget()
|
191
|
+
this.lookup()
|
192
|
+
}
|
193
|
+
|
194
|
+
e.stopPropagation()
|
195
|
+
e.preventDefault()
|
196
|
+
}
|
197
|
+
|
198
|
+
// modified typeahead function to force a match and add a delay on hide
|
199
|
+
, blur: function (e) {
|
200
|
+
var that = this
|
201
|
+
this.focused = false
|
202
|
+
var val = this.$element.val()
|
203
|
+
if (!!this.options.force_match) {
|
204
|
+
if ( !this.selected && val !== '' ) {
|
205
|
+
this.$element.val('')
|
206
|
+
this.$source.val('').trigger('change')
|
207
|
+
this.$target.val('').trigger('change')
|
208
|
+
}
|
209
|
+
} else {
|
210
|
+
this.$target.val(val).trigger('change')
|
211
|
+
}
|
212
|
+
if (!this.mousedover && this.shown) setTimeout(function () { that.hide() }, 200)
|
213
|
+
}
|
214
|
+
|
215
|
+
// modified typeahead function to not hide
|
216
|
+
, mouseleave: function (e) {
|
217
|
+
this.mousedover = false
|
218
|
+
}
|
219
|
+
})
|
220
|
+
|
221
|
+
/* COMBOBOX PLUGIN DEFINITION
|
222
|
+
* =========================== */
|
223
|
+
|
224
|
+
$.fn.combobox = function ( option ) {
|
225
|
+
return this.each(function () {
|
226
|
+
var $this = $(this)
|
227
|
+
, data = $this.data('combobox')
|
228
|
+
, options = typeof option == 'object' && option
|
229
|
+
if(!data) $this.data('combobox', (data = new Combobox(this, options)))
|
230
|
+
if (typeof option == 'string') data[option]()
|
231
|
+
})
|
232
|
+
}
|
233
|
+
|
234
|
+
$.fn.combobox.defaults = {
|
235
|
+
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>'
|
236
|
+
, menu: '<ul class="typeahead typeahead-long dropdown-menu"></ul>'
|
237
|
+
, item: '<li><a href="#"></a></li>'
|
238
|
+
, force_match: true
|
239
|
+
}
|
240
|
+
|
241
|
+
$.fn.combobox.Constructor = Combobox
|
242
|
+
|
243
|
+
}( window.jQuery );
|
@@ -0,0 +1,31 @@
|
|
1
|
+
<!DOCTYPE HTML>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Bootstrap Combobox Test Suite</title>
|
5
|
+
|
6
|
+
<!-- jquery -->
|
7
|
+
<!--<script src="http://code.jquery.com/jquery-1.7.min.js"></script>-->
|
8
|
+
<script src="vendor/jquery.js"></script>
|
9
|
+
<script src="vendor/bootstrap-typeahead.js"></script>
|
10
|
+
|
11
|
+
<!-- qunit -->
|
12
|
+
<link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
|
13
|
+
<script src="vendor/qunit.js"></script>
|
14
|
+
|
15
|
+
<!-- plugin sources -->
|
16
|
+
|
17
|
+
<script src="../../js/bootstrap-combobox.js"></script>
|
18
|
+
|
19
|
+
<!-- unit tests -->
|
20
|
+
<script src="unit/bootstrap-combobox.js"></script>
|
21
|
+
|
22
|
+
<body>
|
23
|
+
<div>
|
24
|
+
<h1 id="qunit-header">Bootstrap Combobox Test Suite</h1>
|
25
|
+
<h2 id="qunit-banner"></h2>
|
26
|
+
<h2 id="qunit-userAgent"></h2>
|
27
|
+
<ol id="qunit-tests"></ol>
|
28
|
+
<div id="qunit-fixture"></div>
|
29
|
+
</div>
|
30
|
+
</body>
|
31
|
+
</html>
|
@@ -0,0 +1,297 @@
|
|
1
|
+
$(function () {
|
2
|
+
|
3
|
+
module("bootstrap-combobox")
|
4
|
+
|
5
|
+
test("should be defined on jquery object", function () {
|
6
|
+
ok($(document.body).combobox, 'combobox method is defined')
|
7
|
+
})
|
8
|
+
|
9
|
+
test("should return element", function () {
|
10
|
+
var $select = $('<select />')
|
11
|
+
ok($($select).combobox()[0] == $select[0], 'select returned')
|
12
|
+
})
|
13
|
+
|
14
|
+
test("should build combobox from a select", function() {
|
15
|
+
var $select = $('<select />')
|
16
|
+
$select.combobox()
|
17
|
+
ok($select.data('combobox').$source, 'has a source select')
|
18
|
+
ok($select.data('combobox').$container, 'has a container')
|
19
|
+
ok($select.data('combobox').$element, 'has a input element')
|
20
|
+
ok($select.data('combobox').$button, 'has a button')
|
21
|
+
ok($select.data('combobox').$target, 'has a target')
|
22
|
+
})
|
23
|
+
|
24
|
+
test("should listen to an input", function () {
|
25
|
+
var $select = $('<select />')
|
26
|
+
, combobox = $select.combobox().data('combobox')
|
27
|
+
, $input = combobox.$element
|
28
|
+
ok($._data($input[0], 'events').blur, 'has a blur event')
|
29
|
+
ok($._data($input[0], 'events').keypress, 'has a keypress event')
|
30
|
+
ok($._data($input[0], 'events').keyup, 'has a keyup event')
|
31
|
+
if (combobox.eventSupported('keydown')) {
|
32
|
+
ok($._data($input[0], 'events').keydown, 'has a keydown event')
|
33
|
+
} else {
|
34
|
+
ok($._data($input[0], 'events').keydown, 'does not have a keydown event')
|
35
|
+
}
|
36
|
+
|
37
|
+
combobox.$menu.remove()
|
38
|
+
})
|
39
|
+
|
40
|
+
test("should listen to an button", function () {
|
41
|
+
var $select = $('<select />')
|
42
|
+
, $button = $select.combobox().data('combobox').$button
|
43
|
+
ok($._data($button[0], 'events').click, 'has a click event')
|
44
|
+
})
|
45
|
+
|
46
|
+
test("should create a menu", function () {
|
47
|
+
var $select = $('<select />')
|
48
|
+
ok($select.combobox().data('combobox').$menu, 'has a menu')
|
49
|
+
})
|
50
|
+
|
51
|
+
test("should listen to the menu", function () {
|
52
|
+
var $select = $('<select />')
|
53
|
+
, $menu = $select.combobox().data('combobox').$menu
|
54
|
+
|
55
|
+
ok($._data($menu[0], 'events').mouseover, 'has a mouseover(pseudo: mouseenter)')
|
56
|
+
ok($._data($menu[0], 'events').click, 'has a click')
|
57
|
+
})
|
58
|
+
|
59
|
+
test("should show menu when query entered", function () {
|
60
|
+
var $select = $('<select><option></option><option value="aa">aa</option><option value="ab">ab</option><option value="ac">ac</option></select>').appendTo('body')
|
61
|
+
, $input = $select.combobox().data('combobox').$element
|
62
|
+
, combobox = $select.data('combobox')
|
63
|
+
|
64
|
+
$input.val('a')
|
65
|
+
combobox.lookup()
|
66
|
+
|
67
|
+
ok(combobox.$menu.is(":visible"), 'menu is visible')
|
68
|
+
equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
|
69
|
+
equal(combobox.$menu.find('.active').length, 1, 'one item is active')
|
70
|
+
|
71
|
+
combobox.$menu.remove()
|
72
|
+
$select.remove()
|
73
|
+
combobox.$container.remove()
|
74
|
+
})
|
75
|
+
|
76
|
+
test("should hide menu when query entered", function () {
|
77
|
+
stop()
|
78
|
+
var $select = $('<select><option></option><option value="aa">aa</option><option value="ab">ab</option><option value="ac">ac</option></select>').appendTo('body')
|
79
|
+
, $input = $select.combobox().data('combobox').$element
|
80
|
+
, combobox = $select.data('combobox')
|
81
|
+
|
82
|
+
$input.val('a')
|
83
|
+
combobox.lookup()
|
84
|
+
|
85
|
+
ok(combobox.$menu.is(":visible"), 'menu is visible')
|
86
|
+
equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
|
87
|
+
equal(combobox.$menu.find('.active').length, 1, 'one item is active')
|
88
|
+
|
89
|
+
$input.blur()
|
90
|
+
|
91
|
+
setTimeout(function () {
|
92
|
+
ok(!combobox.$menu.is(":visible"), "menu is no longer visible")
|
93
|
+
start()
|
94
|
+
}, 200)
|
95
|
+
|
96
|
+
combobox.$menu.remove()
|
97
|
+
$select.remove()
|
98
|
+
combobox.$container.remove()
|
99
|
+
})
|
100
|
+
|
101
|
+
test("should set next item when down arrow is pressed", function () {
|
102
|
+
var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>').appendTo('body')
|
103
|
+
, $input = $select.combobox().data('combobox').$element
|
104
|
+
, combobox = $select.data('combobox')
|
105
|
+
|
106
|
+
$input.val('a')
|
107
|
+
combobox.lookup()
|
108
|
+
|
109
|
+
ok(combobox.$menu.is(":visible"), 'menu is visible')
|
110
|
+
equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
|
111
|
+
equal(combobox.$menu.find('.active').length, 1, 'one item is active')
|
112
|
+
ok(combobox.$menu.find('li').first().hasClass('active'), "first item is active")
|
113
|
+
|
114
|
+
$input.trigger({
|
115
|
+
type: 'keypress'
|
116
|
+
, keyCode: 40
|
117
|
+
})
|
118
|
+
|
119
|
+
ok(combobox.$menu.find('li').first().next().hasClass('active'), "second item is active")
|
120
|
+
|
121
|
+
|
122
|
+
$input.trigger({
|
123
|
+
type: 'keypress'
|
124
|
+
, keyCode: 38
|
125
|
+
})
|
126
|
+
|
127
|
+
ok(combobox.$menu.find('li').first().hasClass('active'), "first item is active")
|
128
|
+
|
129
|
+
combobox.$menu.remove()
|
130
|
+
$select.remove()
|
131
|
+
combobox.$container.remove()
|
132
|
+
})
|
133
|
+
|
134
|
+
|
135
|
+
test("should set input and select value to selected item", function () {
|
136
|
+
var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>').appendTo('body')
|
137
|
+
, combobox = $select.combobox().data('combobox')
|
138
|
+
, $input = combobox.$element
|
139
|
+
, $source = combobox.$source
|
140
|
+
, $target = combobox.$target
|
141
|
+
|
142
|
+
|
143
|
+
$input.val('a')
|
144
|
+
combobox.lookup()
|
145
|
+
|
146
|
+
$(combobox.$menu.find('li')[2]).mouseover().click()
|
147
|
+
|
148
|
+
equal($input.val(), 'ac', 'input value was correctly set')
|
149
|
+
equal($source.val(), 'ac', 'select value was correctly set')
|
150
|
+
equal($target.val(), 'ac', 'hidden field value was correctly set')
|
151
|
+
ok(!combobox.$menu.is(':visible'), 'the menu was hidden')
|
152
|
+
|
153
|
+
combobox.$menu.remove()
|
154
|
+
$select.remove()
|
155
|
+
combobox.$container.remove()
|
156
|
+
})
|
157
|
+
|
158
|
+
test("should show menu when no item is selected and button is clicked", function () {
|
159
|
+
var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>').appendTo('body')
|
160
|
+
, $button = $select.combobox().data('combobox').$button
|
161
|
+
, combobox = $select.data('combobox')
|
162
|
+
|
163
|
+
$button.click()
|
164
|
+
|
165
|
+
ok(combobox.$menu.is(":visible"), 'menu is visible')
|
166
|
+
equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
|
167
|
+
equal(combobox.$menu.find('.active').length, 1, 'one item is active')
|
168
|
+
|
169
|
+
combobox.$menu.remove()
|
170
|
+
$select.remove()
|
171
|
+
combobox.$container.remove()
|
172
|
+
})
|
173
|
+
|
174
|
+
test("should add class to container when an item is selected", function () {
|
175
|
+
var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>')
|
176
|
+
, $input = $select.combobox().data('combobox').$element
|
177
|
+
, combobox = $select.data('combobox')
|
178
|
+
|
179
|
+
$input.val('a')
|
180
|
+
combobox.lookup()
|
181
|
+
|
182
|
+
$(combobox.$menu.find('li')[2]).mouseover().click()
|
183
|
+
|
184
|
+
ok(combobox.$container.hasClass('combobox-selected'), 'container has selected class')
|
185
|
+
|
186
|
+
combobox.$menu.remove()
|
187
|
+
})
|
188
|
+
|
189
|
+
test("should clear and focus input and select and remove class from container when button is clicked when item is selected", function () {
|
190
|
+
var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>')
|
191
|
+
, combobox = $select.combobox().data('combobox')
|
192
|
+
, $input = combobox.$element
|
193
|
+
, $source = combobox.$source
|
194
|
+
, $target = combobox.$target
|
195
|
+
|
196
|
+
$input.val('a')
|
197
|
+
combobox.lookup()
|
198
|
+
|
199
|
+
$(combobox.$menu.find('li')[2]).mouseover().click()
|
200
|
+
|
201
|
+
equal($input.val(), 'ac', 'input value was correctly set')
|
202
|
+
equal($source.val(), 'ac', 'select value was correctly set')
|
203
|
+
equal($target.val(), 'ac', 'hidden field value was correctly set')
|
204
|
+
|
205
|
+
combobox.$button.mouseover().click()
|
206
|
+
|
207
|
+
equal($input.val(), '', 'input value was cleared correctly')
|
208
|
+
equal($select.val(), '', 'select value was cleared correctly')
|
209
|
+
// ok($input.is(":focus"), 'input has focus')
|
210
|
+
|
211
|
+
combobox.$menu.remove()
|
212
|
+
})
|
213
|
+
|
214
|
+
test("should set as selected if select was selected before load", function () {
|
215
|
+
var $select = $('<select><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
|
216
|
+
, $input = $select.combobox().data('combobox').$element
|
217
|
+
, combobox = $select.data('combobox')
|
218
|
+
|
219
|
+
equal($input.val(), 'ab', 'input value was correctly set')
|
220
|
+
equal($select.val(), 'ab', 'select value was correctly set')
|
221
|
+
})
|
222
|
+
|
223
|
+
test("should clear input on blur when value does not exist", function() {
|
224
|
+
var $select = $('<select><option>aa</option></select>')
|
225
|
+
, $input = $select.combobox().data('combobox').$element
|
226
|
+
, combobox = $select.data('combobox')
|
227
|
+
|
228
|
+
$input.val('DOES NOT EXIST')
|
229
|
+
combobox.lookup()
|
230
|
+
$input.trigger('blur')
|
231
|
+
|
232
|
+
equal($input.val(), '', 'input value was correctly set')
|
233
|
+
equal($select.val(), 'aa', 'select value was correctly set')
|
234
|
+
|
235
|
+
combobox.$menu.remove()
|
236
|
+
})
|
237
|
+
|
238
|
+
test("should set placeholder text on the input if specified text of no value option", function() {
|
239
|
+
var $select = $('<select><option value="">Pick One</option><option value="aa">aa</option><option value="ab">ab</option><option value="ac">ac</option></select>')
|
240
|
+
, $input = $select.combobox().data('combobox').$element
|
241
|
+
, combobox = $select.data('combobox')
|
242
|
+
|
243
|
+
equal($input.attr('placeholder'), 'Pick One', 'input value was correctly set')
|
244
|
+
|
245
|
+
combobox.$menu.remove()
|
246
|
+
})
|
247
|
+
|
248
|
+
test("should set placeholder text on the input if specified as an data attribute", function() {
|
249
|
+
var $select = $('<select data-placeholder="Type something..."><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
|
250
|
+
, $input = $select.combobox().data('combobox').$element
|
251
|
+
, combobox = $select.data('combobox')
|
252
|
+
|
253
|
+
equal($input.attr('placeholder'), 'Type something...', 'input value was correctly set')
|
254
|
+
|
255
|
+
combobox.$menu.remove()
|
256
|
+
})
|
257
|
+
|
258
|
+
test("should set required attribute the input if specified on the select", function() {
|
259
|
+
var $select = $('<select required="required"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
|
260
|
+
, $input = $select.combobox().data('combobox').$element
|
261
|
+
, combobox = $select.data('combobox')
|
262
|
+
|
263
|
+
equal($input.attr('required'), 'required', 'required was correctly set')
|
264
|
+
|
265
|
+
combobox.$menu.remove()
|
266
|
+
})
|
267
|
+
|
268
|
+
test("should copy classes to the input if specified on the select", function() {
|
269
|
+
var $select = $('<select class="input-small"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
|
270
|
+
, $input = $select.combobox().data('combobox').$element
|
271
|
+
, combobox = $select.data('combobox')
|
272
|
+
|
273
|
+
equal($input.attr('class'), 'input-small', 'class was correctly set')
|
274
|
+
|
275
|
+
combobox.$menu.remove()
|
276
|
+
})
|
277
|
+
|
278
|
+
test("should copy rel attribute to the input if specified on the select", function() {
|
279
|
+
var $select = $('<select rel="tooltip"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
|
280
|
+
, $input = $select.combobox().data('combobox').$element
|
281
|
+
, combobox = $select.data('combobox')
|
282
|
+
|
283
|
+
equal($input.attr('rel'), 'tooltip', 'rel was correctly set')
|
284
|
+
|
285
|
+
combobox.$menu.remove()
|
286
|
+
})
|
287
|
+
|
288
|
+
test("should copy title attribute to the input if specified on the select", function() {
|
289
|
+
var $select = $('<select title="A title"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
|
290
|
+
, $input = $select.combobox().data('combobox').$element
|
291
|
+
, combobox = $select.data('combobox')
|
292
|
+
|
293
|
+
equal($input.attr('title'), 'A title', 'title was correctly set')
|
294
|
+
|
295
|
+
combobox.$menu.remove()
|
296
|
+
})
|
297
|
+
})
|