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 @@ ...@@ -21,18 +21,21 @@
</style> </style>
</head> </head>
<body> <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="container">
<script> <script>
$('.dropdown input, .dropdown label').click(function (event) { $('.dropdown input, .dropdown label').click(function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
</script> </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"> <p class="alert alert-info">
<b>Note:</b> The option names may have changed due to the latest updates. <b>Note:</b> The option names may have changed due to the latest updates.
</p> </p>
...@@ -975,31 +978,6 @@ ...@@ -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; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1372,6 +1350,8 @@ ...@@ -1372,6 +1350,8 @@
</table> </table>
</div> </div>
</p> </p>
</div>
<div class="container-fluid">
<hr> <hr>
<p> <p>
&copy; 2012 &copy; 2012
......
js/bootstrap-multiselect.js
View file @ 7758d767
...@@ -78,22 +78,24 @@ ...@@ -78,22 +78,24 @@
clearTimeout(this.searchTimeout); clearTimeout(this.searchTimeout);
this.searchTimeout = this.asyncFunction($.proxy(function () { this.searchTimeout = this.asyncFunction($.proxy(function () {
var inputValue = event.target.value;
if (this.query != event.target.value) {
if (inputValue != this.query) { this.query = event.target.value;
this.query = inputValue;
this.$select.empty(); $.each($('ul li', this.$container), $.proxy(function(index, element) {
var value = $('input', element).val();
var filteredValues = this.getFilteredOptions(); if (value != this.options.selectAllValue) {
var newOptions = ''; var $option = $('option[value="' + value + '"]', this.$select);
for (var i = 0; i < filteredValues.length; i++) { var label = $option.attr('label') || $option.text();
var option = filteredValues[i]; if (label.substring(0, this.query.length).toLowerCase() != this.query.toLowerCase()) {
newOptions += '<option value="' + option.value + '">' + option.text + '</option>'; $(element).hide();
} }
else {
this.$select.html(newOptions); $(element).show();
this.rebuild(); }
} }
}, this));
}
}, this), 300, this); }, this), 300, this);
}, this)); }, this));
} }
...@@ -167,7 +169,11 @@ ...@@ -167,7 +169,11 @@
var selected = $(element).prop('selected') || false; var selected = $(element).prop('selected') || false;
var $checkbox = $('input', $li); var $checkbox = $('input', $li);
$checkbox.val(value); $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); $('label', $li).append(" " + label);
$('.multiselect-container ul', this.$container).append($li); $('.multiselect-container ul', this.$container).append($li);
...@@ -445,19 +451,6 @@ ...@@ -445,19 +451,6 @@
getSelected: function () { getSelected: function () {
return $('option:selected[value!="' + this.options.selectAllValue + '"]', this.$select); 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() { updateOriginalOptions: function() {
this.originalOptions = this.$select.clone()[0].options; this.originalOptions = this.$select.clone()[0].options;
......
knockout-examples.html
View file @ 7758d767
...@@ -22,18 +22,18 @@ ...@@ -22,18 +22,18 @@
</style> </style>
</head> </head>
<body> <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="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"> <div class="page-header">
<h1>Examples</h1> <h1>Knockout Examples</h1>
</div> </div>
<p> <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. 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 @@ ...@@ -70,6 +70,8 @@
<td></td> <td></td>
</tr> </tr>
</table> </table>
</div>
<div class="container-fluid">
<hr> <hr>
<p> <p>
&copy; 2012 &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