Dropdown Select with the live search: Bootstrap

Follow us

Include the necessary Bootstrap 4 framework and other required resources on the web page. Below sequence for the resources is important to load the bootstrap-select dropdown feature. Here you can use CDN link or download the resource.

Required Resources:-

  • Jquery-3.2.1 JS
  • Bootstrap CSS
  • Bootstrap-select CSS
  • Bootstrap-bundle JS
  • Bootstrap-select JS
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

Example:

 <select id="fruitList" data-live-search="true"  title="Please select fruit" data-live-search-placeholder="Search Fruit"  class="form-control selectpicker"></select>

To use  the select dropdown you need to use .selectpicker class. The data-live-search=”true” & .selectpicker class is mandatory. Here data-live-search attribute enables the live search features. 

Use data-live-search-placeholder which is displayed inside the search box.

How to customize the default “No results Match” string?
For instance, you can change the string displayed when no result matches the live search using data-attributes:
data-none-results-text
<select class="selectpicker show-tick" id="devicePicker" data-none-results-text="I found no results">
  <option>Option 1</option>
  <option>Option 1</option>
  <option>Option 1</option>
  <option>Option 1</option>
</select>

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap: Dropdown Select with ajax Live search</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" >
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
	</head>
	<body>
		<div class="container shadow" style="padding: 5rem; margin-top: 2rem;">
			<div class="row">
				<div class="col-lg-12">
					<div class="form-group">
						<label for="exampleDropdown">#1 # Dropdown Select with "data-live-search" </label>
						<select data-live-search="true" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div> 
					<div class="form-group">
						<label for="exampleDropdown">#2 Dropdown Select with "title" attribute</label>
						<select data-live-search="true" title="Please select fruit" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleDropdown">#3 Dropdown Select with "data-live-search-placeholder" attribute</label>
						<select data-live-search="true" title="Please select fruit" data-live-search-placeholder="Search Fruit" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>WaterMelon</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleDropdown">#4 Dropdown Select with "Multiple" select attribute</label>
						<select data-live-search="true" title="Please select fruit" class="form-control selectpicker" multiple>
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleFormControlSelect2">#5 Dropdown Select using "data-none-results-text" attribute</label>
						<select data-live-search="true" data-none-results-text="I found no results" title="Please select fruit" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>