brand brand
Apps
Pages
Documentation
Quickly Build Applications

Exclusively for webapps Based on Bootstrap

Go Appster

Page Search

Page search uses .filter function for search functionality.

Page search

Filter fuction can use form complte page search.

														
<div class="input-affix-wrapper input-search mb-3">
	<input type="text" class="form-control page-search" placeholder="Search" aria-label="Username" aria-describedby="basic-addon1">
	<span class="input-suffix"><span class="btn-input-clear"><i class="bi bi-x-circle-fill"></i></span>
		<span class="spinner-border spinner-border-sm input-loader text-primary" role="status">
			<span class="sr-only">Loading...</span>
		</span>
	</span>
</div>
<div class="input-affix-wrapper input-search loading">
	<input type="text" class="form-control page-search" placeholder="Search" aria-label="Username" aria-describedby="basic-addon1">
	<span class="input-suffix"><span class="btn-input-clear"><i class="bi bi-x-circle-fill"></i></span>
		<span class="spinner-border spinner-border-sm input-loader text-primary" role="status">
			<span class="sr-only">Loading...</span>
		</span>
	</span>
</div>
													
														
$(".page-search").on("keyup", function() {
	var value1 = $(this).val().toLowerCase();
	$(".page-search-wrap .hk-section").filter(function() {
	$(this).toggle($(this).text().toLowerCase().indexOf(value1) > -1)
	});
});
List search

Filter function can use for list search.

  • List group item one
  • List group item two
  • List group item three 
															
<div class="input-affix-wrapper input-search mb-3">
	<input type="text" class="form-control list-search" placeholder="Search by keywords">
	<span class="input-suffix"><span class="btn-input-clear"><i class="bi bi-x-circle-fill"></i></span>
		<span class="spinner-border spinner-border-sm input-loader text-primary" role="status">
			<span class="sr-only">Loading...</span>
		</span>
	</span>
</div>
<ul class="list-group target-list-wrap">
	<li class="list-group-item">
		List group item one
	</li>
	<li class="list-group-item">
		List group item two
	</li>
	<li class="list-group-item">
		List group item three
	</li>
</ul>
													
															
$(".list-search").on("keyup", function() {
	var value2 = $(this).val().toLowerCase();
	$(".target-list-wrap li").filter(function() {
	$(this).toggle($(this).text().toLowerCase().indexOf(value2) > -1)
	});
});
Dropdown Search

Filter function can use for dropdown item search.

															
<div class="dropdown">
	<button aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside" class="btn btn-secondary" type="button">Dropdown <span class="caret"></span></button>
	<div role="menu" class="dropdown-menu target-dropdown-wrap">
		<div class="input-affix-wrapper input-search  mb-1">
			<input type="text" class="form-control dropdown-search" placeholder="Search by keywords"  aria-describedby="basic-addon1">
			<span class="input-suffix"><span class="btn-input-clear"><i class="bi bi-x-circle-fill"></i></span>
				<span class="spinner-border spinner-border-sm input-loader text-primary" role="status">
					<span class="sr-only">Loading...</span>
				</span>
			</span>
		</div>
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>
														
															
$(".dropdown-search").on("keyup", function() {
	var value3 = $(this).val().toLowerCase();
	$(".target-dropdown-wrap .dropdown-item").filter(function() {
	$(this).toggle($(this).text().toLowerCase().indexOf(value3) > -1)
	});
});
Card Search

Filter function can be use for search of cards.

Card image cap
Card title one
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap
Card title two
Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tempus sem, ac consequat metus.

Go somewhere
Card image cap
Card title three
Card subtitle

Donec vitae cursus mi, in mattis mauris. Vivamus pharetra, lorem nec facilisis tincidunt.

Go somewhere 
															
<div class="input-affix-wrapper input-search w-300p mb-3">
	<input type="text" class="form-control card-search" placeholder="Search by keywords"  aria-describedby="basic-addon1">
	<span class="input-suffix"><span class="btn-input-clear"><i class="bi bi-x-circle-fill"></i></span>
		<span class="spinner-border spinner-border-sm input-loader text-primary" role="status">
			<span class="sr-only">Loading...</span>
		</span>
	</span>
</div>
<div class="row target-cards-wrap">
	<div class="col-md-4">
		<div class="card">
			<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
			<div class="card-body">
				<h5 class="card-title">Card title one</h5>
				<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
			<div class="card-body">
				<h5 class="card-title">Card title two</h5>
				<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tempus sem, ac consequat metus.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
			<div class="card-body">
				<h5 class="card-title">Card title three</h5>
				<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
				<p class="card-text">Donec vitae cursus mi, in mattis mauris. Vivamus pharetra, lorem nec facilisis tincidunt.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</div>
		</div>
	</div>
</div>
													
															
$(".card-search").on("keyup", function() {
	var value4 = $(this).val().toLowerCase();
	$(".target-cards-wrap .card").parent().filter(function() {
	$(this).toggle($(this).text().toLowerCase().indexOf(value4) > -1)
	});
});
Jump to