Skip to content

Commit 7f20074

Browse files
thephwthephw
committed
Merge pull request #128 from wiserstudios/master
Bootstrap 2/3 Compatibility
2 parents a3a545e + acc4791 commit 7f20074

File tree

6 files changed

+77
-197
lines changed

6 files changed

+77
-197
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,26 @@ Then just activate the plugin on a normal select box(suggest having a blank opti
2727
});
2828
</script>
2929

30+
### Options
31+
32+
When activating the plugin, you may include an object containing options for the combobox
33+
34+
$('.combobox').combobox({bsVersion: '2'});
35+
36+
`menu`: Custom markup for the dropdown menu list element.
37+
38+
`item`: Custom markup for the dropdown menu list items.
39+
40+
`matcher`: Custom function with one `item` argument that compares the item to the input. Defaults to matching on the query being a substring of the item, case insenstive
41+
42+
`sorter`: Custom function that sorts a list `items` for display in the dropdown
43+
44+
`highlighter`: Custom function for highlighting an `item`. Defaults to bolding the query within a matched item
45+
46+
`template`: Custom function that returns markup for the combobox.
47+
48+
`bsVersion`: Version of bootstrap being used. This is used by the default `template` function to generate markup correctly. Defaults to '3'. Set to '2' for compatibility with Bootstrap 2
49+
3050
## Live Example
3151

3252
http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html

‎css/bootstrap-combobox.css‎

Lines changed: 2 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,15 @@
1-
.combobox-container {
2-
margin-bottom: 5px;
3-
*zoom: 1;
4-
}
5-
.combobox-container:before,
6-
.combobox-container:after {
7-
display: table;
8-
content: "";
9-
}
10-
.combobox-container:after {
11-
clear: both;
12-
}
13-
.combobox-container input,
14-
.combobox-container .uneditable-input {
15-
-webkit-border-radius: 0 3px 3px 0;
16-
-moz-border-radius: 0 3px 3px 0;
17-
border-radius: 0 3px 3px 0;
18-
}
19-
.combobox-container input:focus,
20-
.combobox-container .uneditable-input:focus {
21-
position: relative;
22-
z-index: 2;
23-
}
24-
.combobox-container .uneditable-input {
25-
border-left-color: #ccc;
26-
}
27-
.combobox-container .add-on {
28-
float: left;
29-
display: inline-block;
30-
width: auto;
31-
min-width: 16px;
32-
height: inherit !important;
33-
margin-right: -1px;
34-
padding: 4px 5px;
35-
font-weight: normal;
36-
color: #999999;
37-
text-align: center;
38-
text-shadow: 0 1px 0 #ffffff;
39-
background-color: #f5f5f5;
40-
border: 1px solid #ccc;
41-
-webkit-border-radius: 3px 0 0 3px;
42-
-moz-border-radius: 3px 0 0 3px;
43-
border-radius: 3px 0 0 3px;
44-
45-
}
46-
.combobox-container .active {
47-
background-color: #a9dba9;
48-
border-color: #46a546;
49-
}
50-
.combobox-container input,
51-
.combobox-container .uneditable-input {
52-
float: left;
53-
-webkit-border-radius: 3px 0 0 3px;
54-
-moz-border-radius: 3px 0 0 3px;
55-
border-radius: 3px 0 0 3px;
56-
}
57-
.combobox-container .uneditable-input {
58-
border-left-color: #eee;
59-
border-right-color: #ccc;
60-
}
61-
.combobox-container .add-on {
62-
margin-right: 0;
63-
margin-left: -1px;
64-
-webkit-border-radius: 0 3px 3px 0;
65-
-moz-border-radius: 0 3px 3px 0;
66-
border-radius: 0 3px 3px 0;
67-
}
68-
.combobox-container input:first-child {
69-
*margin-left: -160px;
70-
}
71-
.combobox-container input:first-child + .add-on {
72-
*margin-left: -21px;
73-
}
74-
.combobox-container select {
75-
display: inline-block;
76-
width: 0;
77-
height: 0;
78-
border: 0;
79-
padding: 0;
80-
margin: 0;
81-
text-indent: -99999px;
82-
*text-indent: 0;
83-
}
841
.form-search .combobox-container,
852
.form-inline .combobox-container {
863
display: inline-block;
874
margin-bottom: 0;
885
vertical-align: top;
896
}
90-
.form-search .combobox-container .add-on,
91-
.form-inline .combobox-container .add-on {
92-
vertical-align: middle;
93-
}
94-
.combobox-selected .combobox-clear {
95-
display: inline-block;
96-
}
977
.combobox-selected .caret {
988
display: none;
999
}
100-
.combobox-clear {
10+
/* :not doesn't work in IE8 */
11+
.combobox-container:not(.combobox-selected) .glyphicon-remove {
10112
display: none;
102-
width: 14px;
103-
height: 14px;
104-
line-height: 14px;
105-
vertical-align: top;
106-
opacity: 0.3;
107-
filter: alpha(opacity=30);
108-
}
109-
.dropdown:hover .combobox-clear,
110-
.open.dropdown .combobox-clear {
111-
opacity: 1;
112-
filter: alpha(opacity=100);
113-
}
114-
.btn .combobox-clear {
115-
margin-top: 1px;
116-
margin-left: 1px;
117-
}
118-
.btn:hover .combobox-clear,
119-
.open.btn-group .combobox-clear {
120-
opacity: 1;
121-
filter: alpha(opacity=100);
12213
}
12314
.typeahead-long {
12415
max-height: 300px;
@@ -145,6 +36,3 @@
14536
.control-group.success .combobox-container .caret {
14637
border-top-color: #468847;
14738
}
148-
.btn .combobox-clear [class^="icon-"] {
149-
line-height: 1.4em;
150-
}

‎js/bootstrap-combobox.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
this.$target = this.$container.find('input[type=hidden]');
3232
this.$button = this.$container.find('.dropdown-toggle');
3333
this.$menu = $(this.options.menu).appendTo('body');
34+
this.template = this.options.template || this.template
3435
this.matcher = this.options.matcher || this.matcher;
3536
this.sorter = this.options.sorter || this.sorter;
3637
this.highlighter = this.options.highlighter || this.highlighter;
@@ -46,7 +47,7 @@
4647
constructor: Combobox
4748

4849
, setup: function () {
49-
var combobox = $(this.options.template);
50+
var combobox = $(this.template());
5051
this.$source.before(combobox);
5152
this.$source.hide();
5253
return combobox;
@@ -153,6 +154,14 @@
153154
return this.render(items.slice(0, this.options.items)).show();
154155
}
155156

157+
, template: function() {
158+
if (this.options.bsVersion == '2') {
159+
return '<div class="combobox-container"><input type="hidden" /> <div class="input-append"> <input type="text" autocomplete="off" /> <span class="add-on dropdown-toggle" data-dropdown="dropdown"> <span class="caret"/> <i class="icon-remove"/> </span> </div> </div>'
160+
} else {
161+
return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> <input type="text" autocomplete="off" /> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret" /> <span class="glyphicon glyphicon-remove" /> </span> </div> </div>'
162+
}
163+
}
164+
156165
, matcher: function (item) {
157166
return ~item.toLowerCase().indexOf(this.query.toLowerCase());
158167
}
@@ -394,7 +403,7 @@
394403
};
395404

396405
$.fn.combobox.defaults = {
397-
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>'
406+
bsVersion: '3'
398407
, menu: '<ul class="typeahead typeahead-long dropdown-menu"></ul>'
399408
, item: '<li><a href="#"></a></li>'
400409
};

‎js/tests/unit/bootstrap-combobox.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ $(function () {
138138
, $input = combobox.$element
139139
, $source = combobox.$source
140140
, $target = combobox.$target
141-
141+
142142

143143
$input.val('a')
144144
combobox.lookup()
@@ -296,4 +296,16 @@ $(function () {
296296

297297
combobox.$menu.remove()
298298
})
299+
300+
test("should use bootstrap 2 classes if bsVersion option is set to '2'", function() {
301+
var $select = $('<select title="A title"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
302+
, $input = $select.combobox({bsVersion: '2'}).data('combobox').$element
303+
, combobox = $select.data('combobox')
304+
305+
ok($input.parent('.input-append').length > 0)
306+
ok($input.siblings('span.add-on').length > 0)
307+
ok($input.siblings('span.add-on').children('i.icon-remove').length > 0)
308+
309+
combobox.$menu.remove()
310+
})
299311
})

‎less/combobox.less‎

Lines changed: 30 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,52 @@
1-
.combobox-container {
2-
.input-append();
3-
select {
4-
display: inline-block;
5-
width: 0;
6-
height: 0;
7-
border: 0;
8-
padding: 0;
9-
margin: 0;
10-
text-indent: -99999px;
11-
*text-indent: 0;
12-
}
13-
}
14-
15-
.form-search .combobox-container,
16-
.form-inline .combobox-container {
17-
display: inline-block;
18-
margin-bottom: 0;
19-
vertical-align: top;
20-
}
21-
22-
.form-search .combobox-container .add-on,
23-
.form-inline .combobox-container .add-on {
24-
vertical-align: middle;
25-
}
26-
27-
.combobox-selected {
28-
.combobox-clear {
1+
.form-search,
2+
.form-inline {
3+
.combobox-container {
294
display: inline-block;
30-
}
31-
.caret {
32-
display: none;
5+
margin-bottom: 0;
6+
vertical-align: top;
337
}
348
}
359

36-
.combobox-clear {
10+
.combobox-selected .caret {
3711
display: none;
38-
width: 14px;
39-
height: 14px;
40-
line-height: 14px;
41-
vertical-align: top;
42-
.opacity(30);
4312
}
4413

45-
.dropdown:hover .combobox-clear,
46-
.open.dropdown .combobox-clear {
47-
.opacity(100);
48-
}
49-
50-
.btn .combobox-clear {
51-
margin-top: 1px;
52-
margin-left: 1px;
53-
}
54-
55-
.btn .combobox-clear [class^="icon-"] {
56-
line-height: 1.4em;
57-
}
58-
59-
.btn:hover .combobox-clear, .open.btn-group .combobox-clear {
60-
.opacity(100);
14+
/* :not doesn't work in IE8 */
15+
.combobox-container:not(.combobox-selected) .glyphicon-remove {
16+
display: none;
6117
}
6218

6319
.typeahead-long {
6420
max-height: 300px;
6521
overflow-y: auto;
6622
}
6723

68-
.control-group.error {
69-
.combobox-container {
70-
.add-on {
71-
color: #B94A48;
72-
border-color: #B94A48;
73-
}
74-
.caret {
75-
border-top-color: #B94A48;
76-
}
24+
.control-group.error .combobox-container{
25+
.add-on {
26+
color: #B94A48;
27+
border-color: #B94A48;
28+
}
29+
.caret {
30+
border-top-color: #B94A48;
7731
}
7832
}
7933

80-
.control-group.warning {
81-
.combobox-container {
82-
.add-on {
83-
color: #C09853;
84-
border-color: #C09853;
85-
}
86-
.caret {
87-
border-top-color: #C09853;
88-
}
34+
.control-group.warning .combobox-container {
35+
.add-on {
36+
color: #C09853;
37+
border-color: #C09853;
38+
}
39+
.caret {
40+
border-top-color: #C09853;
8941
}
9042
}
9143

92-
.control-group.success {
93-
.combobox-container {
94-
.add-on {
95-
color: #468847;
96-
border-color: #468847;
97-
}
98-
.caret {
99-
border-top-color: #468847;
100-
}
44+
.control-group.success .combobox-container{
45+
.add-on {
46+
color: #468847;
47+
border-color: #468847;
48+
}
49+
.caret {
50+
border-top-color: #468847;
10151
}
10252
}

0 commit comments

Comments
 (0)