This
article will show you how you can highlight search text using jquery present in
a div control or in a span control in your asp.net, html application.
So for this
article first we will download the jquery library from given link.
http://www.jqueryscript.net/text/Smart-Text-Highlighting-Plugin-with-jQuery-jQuiteLight.html
Now we will add the below mention library reference into the header of the page.
Now we will add the below mention library reference into the header of the page.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquitelight.min.js"></script>
|
After this
we will add the below mention function
function
OnchangeHeilight() {
var data = $("#txtData").val();
$("span").removeClass("marked-text");
$("#txtContent").mark([data]);
}
|
In above code I have first cleared the highlighted text and after that highlight the searched text.
Now use the
below css to highlight the text.
.marked-text {
background-color: yellow;
font-weight: bold;
padding: 0 5px;
color: #000;
font-weight: 300;
}
|
Now we have
done check the complete code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Highlight Search
Text Using jQuery</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquitelight.min.js"></script>
<script>
function
OnchangeHeilight() {
var data = $("#txtData").val();
$("span").removeClass("marked-text");
$("#txtContent").mark([data]);
}
</script>
<style>
.marked-text {
background-color: yellow;
font-weight: bold;
padding: 0 5px;
color: #000;
font-weight: 300;
}
</style>
</head>
<body>
search Text: <input type="text" id="txtData" onchange="javascript:
OnchangeHeilight();" />
<br /><br />
<div id="txtContent"
style="width:300px;border:1px solid black;">
This
article will show you how you can search and highlight the text in a gridview
control in asp.net using c#. This i have shown on button click event.
</div>
</body>
</html>
|
Now we have
done run the application to check the output.
About the Author
0 comments:
Please let me know your view