JSFiddle - React, Tailwind, and code Playground
by ravi1989
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body{
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
}
#searchDemo{
width: 600px;
}
#searchContent{
border: 2px solid #CCCCCC;
border-radius: 0 0 0 0;
height: 200px;
margin: 0 auto;
overflow: auto;
padding: 5px;
width: 584px;
}
.back a{
color: #000000;
font-weight: bold;
text-decoration: none;
}
.message {
font-size: 13px;
font-style: italic;
}
label{
clear: both;
float: left;
font-size: 13px;
width: 100px;
}
.searchForm{
background: none repeat scroll 0 0 #CCCCCC;
border: 1px solid #999999;
margin: 15px 0 5px;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="../lib/jquery.textselect.min.js" type="text/javascript"></script>
<script src="https://github.com/nmartynenko/jquery-search-plugin/blob/master/lib/jquery.scrollTo.min.js" type="text/javascript"></script>
<script src="../jquery.search.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
//create searcher
var searcher = $("#searchContent").search({
searchType: "highlightSelected",
searchSelector : "p",
scrollTo : true
});
//make sure we find the same text, otherwise clear search postions
function find(up) {
var currentText = searcher.getText();
var text =...