Click here to Skip to main content
13,046,533 members (70,261 online)
Rate this:
Please Sign up or sign in to vote.
See more:
I need to search text from page .I found this good link But i ned to modify something in this they use only next and previous button which is working properly.But I need to add one more functionality like that.

1) Add one search Button on click it will highlight the first occurring search text or it say there is no matches found.After that it will not do any thing. 2)After selecting the next it will search from second occurring text ,then next ..

Here is my code..

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style type="text/css">

font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;

width: 600px;

border: 2px solid #CCCCCC;
border-radius: 0 0 0 0;
height: 200px;
margin: 0 auto;
overflow: auto;
padding: 5px;
width: 584px;

.back a{
color: #000000;
font-weight: bold;
text-decoration: none;

.message {
font-size: 13px;
font-style: italic;

clear: both;
float: left;
font-size: 13px;
width: 100px;

background: none repeat scroll 0 0 #CCCCCC;
border: 1px solid #999999;
margin: 15px 0 5px;
padding: 5px;

<script src="" type="text/javascript"></script>
<script src="../lib/jquery.textselect.min.js" type="text/javascript"></script>
<script src="../lib/jquery.scrollTo.min.js" type="text/javascript"></script>
<script src="../" type="text/javascript"></script>
jQuery(document).ready(function($) {

//create searcher
var searcher = $("#searchContent").search({
searchType: "highlightSelected",
searchSelector : "p",
scrollTo : true

//make sure we find the same text, otherwise clear search postions
function find(up) {
var currentText = searcher.getText();

var text = $("#searchText").val();

if (text != currentText) {
// alert(getConcurrencesNumber());



//bind events
$("#prev").click(function(e) {


$("#next").click(function(e) {

$("#search").click(function(e) {



<< Back to project page

To search over content, please fill input field and click "Previous" or "Next".


Please enable JavaScript to use search plugin.


<label>Search text</label>
<input type="text" id="searchText" value="sit"/>
<input type="button" id="prev" value="Previous">
<input type="button" id="next" value="Next">
<input type="button" id="search" value="search">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc molestie fringilla risus, non pulvinar sapien molestie at.

Ut id eleifend turpis.

Praesent ac ipsum nec magna gravida convallis.

Suspendisse sed magna leo, eu tincidunt dui.

Suspendisse potenti.

Ut malesuada dictum odio quis egestas.

Aenean mollis ornare leo, at auctor neque consequat a.

Morbi in nibh quis nisl aliquet dignissim vel non nulla.

Sed leo metus, consectetur et commodo sit amet, molestie nec urna.

Quisque vestibulum dictum odio, vitae vulputate velit sodales sit amet.

Fusce sit amet diam nunc.

Nullam semper, nisi id pulvinar eleifend, eros tortor semper mauris, id facilisis mauris justo ut erat.

Ut dolor nunc, rutrum in imperdiet et, ultrices a turpis.

Nam convallis luctus est, quis ornare metus semper non.

Posted 12-Jul-13 16:29pm

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170713.1 | Last Updated 12 Jul 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100