How to search text with from contends having search, next , previous Button in query

Question

0.00/5 (No votes)

See more:

I need to search text from page .I found this good link But i ned to modify something https://github.com/nmartynenko/jquery-search-plugin.Actually 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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style type="text/css">

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

#searchDemo{
width: 600px;
}

#searchContent{
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;
}

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

.searchForm{
background: none repeat scroll 0 0 #CCCCCC;
border: 1px solid #999999;
margin: 15px 0 5px;
padding: 5px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" 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="../jquery.search.min.js" type="text/javascript"></script>
<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) {
searcher.setText(text);
// alert(getConcurrencesNumber());

}

searcher.nextConcurrence(up);
}

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

find(true);
});

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

find(false);
});
$("#search").click(function(e) {
e.preventDefault();

find(true);
});

})
</script>
</head>
<body>

<< Back to project page

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

Please enable JavaScript to use search plugin.

</noscript>

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.

</body>
</html>

Posted 12-Jul-13 16:29pm

ravi1989h

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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