Click here to Skip to main content
15,397,729 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am implementing the Text search functionality on page .I found lot of links .But i need more functionality .

Here is good example
http://jsfiddle.net/z7fjW/137/[^]

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";                             //use body as selector 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="highlight" >"+searchTerm+"</span>"));
            if($('.highlighted:first').length) {             //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}


But I need it only search first word(present first) then using next it goes to next (go to next position).Then previous (go to previous position).as in note pad ? Is this possible in query?
Posted
Updated 7-Jul-13 20:37pm
v2

1 solution

Hello Ravi,

Please find below a test script done using JQuery[^] and JQuery Highlight plugin[^]. I hope it will get you started.
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='static/js/jquery/jquery-1.10.2.js'></script>
<script type='text/javascript' src='static/js/jquery/jquery.highlight-4.js'></script>
<style type='text/css'>
body {font-family:Calibri,Tahoma,Verdana; }
input {font-family: inherit; }
input[type=button] {min-height:24px; min-width:64px; }
body p { font-family:Consolas; text-align:justified; margin: 10px; 0 0 0;}
.highlight { background-color:yellow; }
.emptyBlock1000 { height:auto; }
.emptyBlock2000 { height:auto; }
.current { background-color: #957F68 !important; color: #ffffff; }
</style>
<script type='text/javascript'>
var lstEl = null;
var cntr = -1;

$(document).ready(function() {
    $('#btnSearch').click(function() {
        lstEl = null;
        cntr = -1;
        var vl = document.getElementById('searchTerm').value;
        $("#bodyContainer").removeHighlight();
        $("#bodyContainer").highlight(vl);
    });

    $('#btnNext').click(function() {
        alert(cntr);
        if (lstEl === null) {
            lstEl = $('#bodyContainer').find('span.highlight');
            if (!lstEl || lstEl.length === 0) {
                lstEl = null;
                return;
            }
        }
        if (cntr < lstEl.length - 1) {
            cntr++;
            if (cntr > 0) {
                $(lstEl[0]).removeClass('current');
            }
            var elm = lstEl[cntr];
            $(elm).addClass('current');
        } else
            alert("End of search reached!");
    });

    $('#btnPrev').click(function() {
        alert(cntr);
        if (lstEl === null) {
            lstEl = $('#bodyContainer').find('span.highlight');
            if (!lstEl || lstEl.length === 0) {
                lstEl = null;
                return;
            }
        }
        if (cntr > 0) {
            cntr--;
            if (cntr < lstEl.length) {
                $(lstEl[cntr + 1]).removeClass('current');
            }
            var elm = lstEl[cntr];
            $(elm).addClass('current');
        } else
            alert("Begining of search!");
    });
});
</script>
</head>
<body>
    <br/>
    <form name="frmMain" id="frmMain" method="post">
        <input type="text" id="searchTerm" />
        <input type="button" id="btnSearch" value="search" />
        <input type="button" id="btnNext" value="next" />
        <input type="button" id="btnPrev" value="prev" />
    </form><br/>
    <div id="bodyContainer">
        <p class="emptyBlock1000">Empty Space to test Scrolling functionality</p>
        <p>Welcome to my search and highlight script</p>
        <p>By Tom Alexander<br/>
        Searching for terms can be done by using the browser's control (or cmd) + F feature.</p>
        <p>The problem is that not many people know about it and therefore its usefulness goes out the window</p>
        <p>Using this script, we can mimic that functionality by using a search box and button</p>
        <p>More text
            <p class="emptyBlock2000">Empty Space to test Scrolling functionality</p>
        </p>
    </div>
</body>
</html>

Regards,
   
Comments
ravi1989h 9-Jul-13 5:20am
   
There is problem in your solution 1) It is not scrolling when the word is below the page .Secondly it is not removing the previous search text.
Prasad Khandekar 9-Jul-13 5:31am
   
Hello Ravi,

The solution basically highlights all matches and then allows you to navigate through it by highlighting it with different color. If you look at the btnSearch click function you shall observer that it first clears the previous search ($("#bodyContainer").removeHighlight();).

As far as scrolling is concerned you can use something like $(window).scrollTop($(elm)).position().top);

Regards,
Member 12133978 16-Nov-15 2:57am
   
Thank you for helping me.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900