Skip to content

B
bootstrap-multiselect
Commit 7758d767 authored by David Stutz's avatar David Stutz
Browse files
Options

Fixed #81. 

The filtering option will now hide or show the filtered options instead
of destryoing/rubuilding them. So selected options will not be
destroyed. Updated the demo an knockout examples. Added "fork me"
slogan.
parent 9700a3d2
Hide whitespace changes
Inline Side-by-side
Showing with 46 additions and 71 deletions
index.html
View file @ 7758d767
......@@ -21,18 +21,21 @@
</style>
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container-fluid" style="background:#F5F5F5;border-bottom:1px solid #DDDDDD;margin-bottom:16px;">
<div style="text-align:center;">
<h1 style="font-size:300%;margin: 26px 0px;">Bootstrap Multiselect</h1>
<p class="lead">
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
</div>
<div class="container">
<script>
$('.dropdown input, .dropdown label').click(function (event) {
event.stopPropagation();
});
</script>
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
<p class="alert alert-info">
<b>Note:</b> The option names may have changed due to the latest updates.
</p>
......@@ -975,31 +978,6 @@
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td>
<div class="btn-group">
<select id="example30" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example30-select-all" class="btn btn-primary">Select all</button>
<button id="example30-deselect-all" class="btn">Deselect all</button>
</div>
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
});
&lt;/script&gt;
</pre>
</td>
......@@ -1372,6 +1350,8 @@
</table>
</div>
</p>
</div>
<div class="container-fluid">
<hr>
<p>
&copy; 2012
......
js/bootstrap-multiselect.js
View file @ 7758d767
......@@ -78,22 +78,24 @@
clearTimeout(this.searchTimeout);
this.searchTimeout = this.asyncFunction($.proxy(function () {
var inputValue = event.target.value;
if (inputValue != this.query) {
this.query = inputValue;
this.$select.empty();
var filteredValues = this.getFilteredOptions();
var newOptions = '';
for (var i = 0; i < filteredValues.length; i++) {
var option = filteredValues[i];
newOptions += '<option value="' + option.value + '">' + option.text + '</option>';
}
this.$select.html(newOptions);
this.rebuild();
}
if (this.query != event.target.value) {
this.query = event.target.value;
$.each($('ul li', this.$container), $.proxy(function(index, element) {
var value = $('input', element).val();
if (value != this.options.selectAllValue) {
var $option = $('option[value="' + value + '"]', this.$select);
var label = $option.attr('label') || $option.text();
if (label.substring(0, this.query.length).toLowerCase() != this.query.toLowerCase()) {
$(element).hide();
}
else {
$(element).show();
}
}
}, this));
}
}, this), 300, this);
}, this));
}
......@@ -167,7 +169,11 @@
var selected = $(element).prop('selected') || false;
var $checkbox = $('input', $li);
$checkbox.val(value);
if (value == this.options.selectAllValue) $checkbox.parent().parent().addClass('multiselect-all');
if (value == this.options.selectAllValue) {
$checkbox.parent().parent().addClass('multiselect-all');
}
$('label', $li).append(" " + label);
$('.multiselect-container ul', this.$container).append($li);
......@@ -445,19 +451,6 @@
getSelected: function () {
return $('option:selected[value!="' + this.options.selectAllValue + '"]', this.$select);
},
// Get filtered options.
getFilteredOptions: function () {
if (this.query == '') return this.originalOptions;
var query = this.query;
var options = [];
$.each(this.originalOptions, function(index, option) {
if (option.text.substring(0, query.length).toLowerCase() == query.toLowerCase()) options.push(option);
});
return options;
},
updateOriginalOptions: function() {
this.originalOptions = this.$select.clone()[0].options;
......
knockout-examples.html
View file @ 7758d767
......@@ -22,18 +22,18 @@
</style>
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container-fluid" style="background:#F5F5F5;border-bottom:1px solid #DDDDDD;margin-bottom:16px;">
<div style="text-align:center;">
<h1 style="font-size:300%;margin: 26px 0px;">Bootstrap Multiselect</h1>
<p class="lead">
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
<p class="alert alert-info">
<b>Note:</b> The option names may have changed due to the latest updates.
</p>
<div class="page-header">
<h1>Examples</h1>
<h1>Knockout Examples</h1>
</div>
<p>
The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
......@@ -70,6 +70,8 @@
<td></td>
</tr>
</table>
</div>
<div class="container-fluid">
<hr>
<p>
&copy; 2012
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment