This time I will share jQuery Plugin and tutorial about Search Keyword Highlighting Plugin With jQuery – Highlite, hope it will help you in programming stack.
Highlite is a really small jQuery text highlighting plugin which enables you to live search and highlight text found in a specific container.
How to use it:
1. Add the jQuery Highlite plugin after you’ve added jQuery JavaScript library into the webpage.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery.highlite.js"></script> |
2. Create a search field for the plugin.
1 |
<input type="search" id="search" placeholder="Search"> |
3. Active the plugin and specify the container you want to search through.
1 |
$("#search").on("search change keyup", function () { |
3 |
$(".content").highlite({ |
4. Style the searched/highlighted text in the CSS.
2 |
background-color: yellow; |
This awesome jQuery plugin is developed by stassop. For more Advanced Usages, please check the demo page or visit the official website.
