Jquery highlight search text in div using highlight JS with example
In this post we will give you information about Jquery highlight search text in div using highlight JS with example. Hear we will give you detail about Jquery highlight search text in div using highlight JS with exampleAnd how to use it also give you demo for it if it is necessary.
If you want to highlight search text in your page using jquery then you have to choose highlight JS Jquery plugin. highlight JS Plugin is very simple to use and more simple. In this example i give you example using highlight JS. So, you can also check preview you can see after run bellow example.
Preview:
In this example you have to just copy code and paste in your index.html file and run that file. After run this file you will found like above preview.
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 >
<h2 ><strong>Jquery highlight search text using highlight JS</strong></h2>
<div >
<div >
<div >
<div >
<div >
<input type="text" placeholder="Search for...">
<span >
<button type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div >
<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>
You can find more information about highlight JS here : highlight JS
Hope this code and post will helped you for implement Jquery highlight search text in div using highlight JS with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs