Jquery highlight search text in div using highlight JS

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you Jquery highlight search text in div by using highlight JS. If we want to highlight the search text in our page by using jquery then we can choose the highlight JS Jquery plugin. highlight JS Plugin is a very simple to use and also more simple. Now in this example i will give you an example by using highlight JS.

So in this example just you have to copy the code and paste in our index.html file and then if we run that file. After the run this file we will found as we want.

index.html
<html lang="en">
<head>
    <title>Jquery highlight search text in div</title>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://johannburkard.de/resources/Johann/jquery.highlight-5.js"></script>
    <style type="text/css">
    	body {background-color: #E1E1E1}
    	p{font-size: 16px}
    	.highlight { background-color: yellow }
    </style>
</head>
<body>
<div class="container">
	<h2 class="text-center text-success"><strong>Jquery highlight search text using highlight JS</strong></h2>
	<div class="panel panel-primary">
	  <div class="panel-heading">
	  	<div class="row">
	  		<div class="col-lg-6">
		  		<div class="input-group">
			      <input type="text" class="form-control search" placeholder="Search for...">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button">Go!</button>
			      </span>
			    </div>
		    </div>
	  	</div>		
	  </div>
	  <div class="panel-body">


	  	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia.
		</p>


		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia.
		</p>


		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia.
		</p>


	  </div>
	</div>
</div>


<script type="text/javascript">
	$('button').click(function(){
		$('.panel-body').removeHighlight().highlight($('.search').val());
	})
</script>


</body>
</html>

Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →