Vendor Plugin

Vendor : Bootstrap Select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. 


/* 
	:: Vendor Path
	node_modules/bootstrap-select/

	:: Installed
	npm install bootstrap-select

	:: SOW Controller Init
*/	$.SOW.vendor.bootstrap_select.init('select.bs-select');


/* 
	:: Refresh 
	   (on select changes/populate/repopulate)
*/	$.SOW.vendor.bootstrap_select.refresh();

Examples 


<!-- Basic -->
<select class="form-control bs-select" title="Please Select...">
	<option value="0">Basic</option>
	<option value="1">Mustard</option>
	<option value="2">Ketchup</option>
	<option value="3">Barbecue</option>
</select>

<!-- Pill -->
<select class="form-control form-control-pill bs-select" title="Please Select...">
	<option value="0">Basic</option>
	<option value="1">Mustard</option>
	<option value="2">Ketchup</option>
	<option value="3">Barbecue</option>
</select>

<!-- Clean -->
<select class="form-control form-control-clean bs-select" title="Please Select...">
	<option value="0">Basic</option>
	<option value="1">Mustard</option>
	<option value="2">Ketchup</option>
	<option value="3">Barbecue</option>
</select>

											

<!-- Placeholder -->
<select class="form-control bs-select mb-3" title="Placeholder text...">
	<option value="1">Mustard</option>
	<option value="2">Ketchup</option>
	<option value="3">Barbecue</option>
</select>

<!-- Valid -->
<select class="form-control bs-select is-valid">
	<option value="1">Mustard</option>
	<option value="2">Ketchup</option>
	<option value="3">Barbecue</option>
</select>

<!-- Invalid -->
<select class="form-control bs-select is-invalid">
	<option value="1">Mustard</option>
	<option value="2">Ketchup</option>
	<option value="3">Barbecue</option>
</select>
											

<select class="form-control bs-select" title="Please Select...">
	<option value="0">Optgroup</option>
	<optgroup label="Picnic">
		<option value="1">Mustard</option>
		<option value="2">Ketchup</option>
		<option value="3">Relish</option>
	</optgroup>
	<optgroup label="Camping">
		<option value="4">Tent</option>
		<option value="5">Flashlight</option>
		<option value="6">Toilet Paper</option>
	</optgroup>
</select>
											
<!-- Note: .bs-select-fix class is optionally used to 
fix "page jump" on multiple options. -->
<select class="form-control bs-select bs-select-fix" multiple>
	<option value="1">Mustard</option>
	<option value="2">Ketchup</option>
	<option value="3">Barbecue</option>
</select>
* type: sugar 
<!--

Specify a number for data-size to choose the maximum number of items to show in the menu.
data-size="1"
-->
<select class="form-control bs-select" data-live-search="true">
	<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
	<option data-tokens="mustard">Burger, Shake and a Smile</option>
	<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
											


<select class="form-control bs-select" multiple data-actions-box="true">
	<option>Mustard</option>
	<option>Ketchup</option>
	<option>Relish</option>
</select>
											


<select class="form-control bs-select">
	<option>Mustard</option>
	<option>Ketchup</option>
	<option>Relish</option>
	<option>Mayonnaise</option>
	<option data-divider="true"></option>
	<option>Barbecue Sauce</option>
	<option>Salad Dressing</option>
	<option>Tabasco</option>
	<option>Salsa</option>
</select>
											


<select class="form-control bs-select bs-select-list-sm">
	<option>Mustard</option>
	<option>Ketchup</option>
	<option>Relish</option>
	<option>Mayonnaise</option>
	<option data-divider="true"></option>
	<option>Barbecue Sauce</option>
	<option>Salad Dressing</option>
	<option>Tabasco</option>
	<option>Salsa</option>
</select>
											

<select class="bs-select form-control" data-header="Select a condiment">
	<option data-subtext="French's">Mustard</option>
	<option data-subtext="Heinz">Ketchup</option>
	<option data-subtext="Sweet">Relish</option>
	<option data-subtext="Miracle Whip">Mayonnaise</option>
	<option data-divider="true"></option>
	<option data-subtext="Honey">Barbecue Sauce</option>
	<option data-subtext="Ranch">Salad Dressing</option>
	<option data-subtext="Sweet & Spicy">Tabasco</option>
	<option data-subtext="Chunky">Salsa</option>
</select>
											
<!--
Custom Class Examples
	bg-light select-form-control

	bg-primary select-form-control text-white
	bg-danger select-form-control text-white
	...
-->
<select class="bs-select form-control" data-style="bg-danger select-form-control text-white">
	<option data-subtext="French's">Mustard</option>
	<option data-subtext="Heinz">Ketchup</option>
	<option data-subtext="Sweet">Relish</option>
</select>
Jump To