我需要从页面中搜索文本。我找到了这个很好的链接，但我不得不修改一些内容https://github.com/nmartynenko/jquery-search-plugin.Actually在这种情况下，他们只使用正常工作的下一个和上一个按钮。但我需要再添加一个类似的功能。
1） 添加一个搜索按钮，单击它将突出显示第一个出现的搜索文本，或者它说没有找到匹配项。之后它将不会做任何事情。2） 选择下一个后，它将从第二个出现的文本中搜索，然后是下一个。。
这是我的密码。。
<!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>
<div id="searchDemo">
<p class="back"><a href="https://github.com/nmartynenko/jquery-search-plugin"> << Back to project page</a></p>
<p class="message">To search over content, please fill input field and click "Previous" or "Next".</p>
<noscript>
<p>Please enable JavaScript to use search plugin.</p>
</noscript>
<div class="searchForm">
<div>
<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">
</div>
</div>
<div id="searchContent">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Nunc molestie fringilla risus, non pulvinar sapien molestie at.</p>
<p>Ut id eleifend turpis.</p>
<p>Praesent ac ipsum nec magna gravida convallis.</p>
<p>Suspendisse sed magna leo, eu tincidunt dui.</p>
<p>Suspendisse potenti.</p>
<p>Ut malesuada dictum odio quis egestas.</p>
<p>Aenean mollis ornare leo, at auctor neque consequat a.</p>
<p>Morbi in nibh quis nisl aliquet dignissim vel non nulla.</p>
<p>Sed leo metus, consectetur et commodo sit amet, molestie nec urna.</p>
<p>Quisque vestibulum dictum odio, vitae vulputate velit sodales sit amet.</p>
<p>Fusce sit amet diam nunc.</p>
<p>Nullam semper, nisi id pulvinar eleifend, eros tortor semper mauris, id facilisis mauris justo ut erat.</p>
<p>Ut dolor nunc, rutrum in imperdiet et, ultrices a turpis.</p>
<p>Nam convallis luctus est, quis ornare metus semper non.</p>
</div>
</div>
</body>
</html>
试试这个：
查找检查是否有任何出现，如果有，则查找第一个出现。
if(searcher.getConcurrencesNumber() > 0){
searcher.findConcurrence(0);
}