My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.

Categories

My Older Tutorials

My Old Web Dev Site

JQUERY CODE EXAMPLE created on Sunday, August 22, 2010 permalink
A simple jquery search machine for a web page
This example shows how easy it is with JQuery to put a little form on the page that allows a user to search for a keyword which highlights that keyword on the page.
<!DOCTYPE html>
<html>
    <head>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
            google.load('jquery', '1.4.2');
            google.setOnLoadCallback(function() {
                $('#searchButton').click(function() {
                    $('p').removeClass('highlight');
                    $('p:contains("' + $('#searchText').val() + '")').addClass('highlight');
                });
            });
        </script>
        <style>
            p {
                color: brown;
            }

            p.highlight {
                background-color: orange;
            }

            body {
                background-color: beige;
            }
        </style>

    </head>
    <body>
        <input id="searchText" value="second" />
        <button id="searchButton">Search</button>
        <p>This is the first entry.</p>
        <p>This is the second entry.</p>
        <p>This is the third entry.</p>
        <p>This is the fourth entry.</p>
    </body>
</html>
need markup?
 

Most Recently Added Items: