<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Box</title>
<script src="../Resources/JSFiles/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.highlighted
{
background-color: yellow;
}
#search
{
width: 190px;
height: 20px;
border: 0px solid gray;
background-color: #EDEDED;
color: Black;
font-weight: normal;
font-size: 14px;
}
#spanID:focus
{
border-color: #668681;
-webkit-box-shadow: inset 0px 0px 10px 0px #ddd;
-moz-box-shadow: inset 0px 0px 10px 0px #ddd;
box-shadow: inset 0px 0px 10px 0px #ddd;
}
#searchText
{
width: 20px;
background-color: Transparent;
vertical-align: middle;
}
#spanID
{
background-color: #EDEDED;
border: 1px solid #808080;
float: right;
width: 210px;
}
</style>
<script type="text/javascript">
function searchAndHighlight(searchTerm, selector) {
if(searchTerm) {
//var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
//var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
var selector = selector || "body"; //default selector is body if none provided
var searchTermRegEx = new RegExp(searchTerm,"ig");
var matches = $(selector).text().match(searchTermRegEx);
if(matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
$(selector).html($(selector).html()
.replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>"));
if($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
else{
alert("No results found");
}
}
return false;
}
</script>
</head>
<body>
<div class="content" id="bodyContainer">
<h1>
<span id="spanID" style="float: right;"><input type="text" id="search" placeHolder="search..." onblur="javascript: searchAndHighlight($(this).val(), '#bodyContainer');" /><input type="image" src="images/zoom_in.png" title="search..." id="searchText" name="searchText" onclick="searchAndHighlight($('#search').val(), '#bodyContainer')" /></span>
</h1>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Box</title>
<script src="../Resources/JSFiles/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.highlighted
{
background-color: yellow;
}
#search
{
width: 190px;
height: 20px;
border: 0px solid gray;
background-color: #EDEDED;
color: Black;
font-weight: normal;
font-size: 14px;
}
#spanID:focus
{
border-color: #668681;
-webkit-box-shadow: inset 0px 0px 10px 0px #ddd;
-moz-box-shadow: inset 0px 0px 10px 0px #ddd;
box-shadow: inset 0px 0px 10px 0px #ddd;
}
#searchText
{
width: 20px;
background-color: Transparent;
vertical-align: middle;
}
#spanID
{
background-color: #EDEDED;
border: 1px solid #808080;
float: right;
width: 210px;
}
</style>
<script type="text/javascript">
function searchAndHighlight(searchTerm, selector) {
if(searchTerm) {
//var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
//var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
var selector = selector || "body"; //default selector is body if none provided
var searchTermRegEx = new RegExp(searchTerm,"ig");
var matches = $(selector).text().match(searchTermRegEx);
if(matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
$(selector).html($(selector).html()
.replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>"));
if($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
else{
alert("No results found");
}
}
return false;
}
</script>
</head>
<body>
<div class="content" id="bodyContainer">
<h1>
<span id="spanID" style="float: right;"><input type="text" id="search" placeHolder="search..." onblur="javascript: searchAndHighlight($(this).val(), '#bodyContainer');" /><input type="image" src="images/zoom_in.png" title="search..." id="searchText" name="searchText" onclick="searchAndHighlight($('#search').val(), '#bodyContainer')" /></span>
</h1>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
<p>
Input your text here.</p>
</div>
</div>
</body>
</html>