Internal Search Using Jquery/ Search within Webpage Using Jquery
Here is a way to search a text/string present inside a page by typing the keyword in the textbox. Here We are using Jquery file and little bit of CSS.
<!DOCTYPE html> <html> <head> <title>Internal Search Using Jquery</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> #all_text span { text-decoration:underline; background-color:yellow; } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $('#searchfor').keyup(function(){ var page = $('#all_text'); var pageText = page.text().replace("<span>","").replace("</span>"); var searchedText = $('#searchfor').val(); var theRegEx = new RegExp("("+searchedText+")", "igm"); var newHtml = pageText.replace(theRegEx ,"<span>$1</span>"); page.html(newHtml); }); });//]]> </script> </head> <body> <input type="text" id="searchfor"/> <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</p> </body> </html>
No comments:
Post a Comment
Thank You for Your Comments. We will get back to you soon.