如何在jquery中使用next和previor功能从页面中搜索文本
How to search text from page with next and previous functionality in jquery
我正在页面上实现文本搜索功能。我发现了很多链接。但我需要更多的功能。
这是一个很好的例子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='highlighted'>"+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;
}
但我只需要它搜索第一个单词(先出现),然后使用next它转到next(转到下一个位置)?这在疑问中可能吗?
不是直接高亮显示,而是添加类"match"并使用它
$(selector).html($(selector).html()
.replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>"));
//to highlighted specific index
$('.match:first').addClass('highlighted');
//to work with index you need you var matches to know what indexes exist
$('.match').eq(3).addClass('highlighted');
演示
我看了看http://jsfiddle.net/ruddog2003/z7fjW/141/,这是一个很好的起点。我对逻辑进行了一些修改,以允许下一个和上一个,并使其更加健壮。它并不完美,但下面是我的AJAX格式代码
HTML
> <div data-role="content">
> <div id="fulltext-search">
> <input type="text" name="search-input" value="" placeholder="Type text here..."/>
> <input type="button" name="search-action" value="Search"/>
> <button id="searchPrevious"> << </button>
> <button id="searchNext"> >> </button>
> </div>
> </div>
CSS
#document_fulltext [data-role="content"] #fulltext-search {
width: 100%;
text-align: center;
position: fixed;
top: 0px;
background-color: rgba(255,255,255, 0.8);
z-index: 10000;
border-bottom: 1px solid #000;
}
.highlighted {
color: white;
background-color: rgba(255,20,0,0.5);
padding: 3px;
border: 1px solid red;
-moz-border-radius: 15px;
border-radius: 15px;
}
JAVASCRIPT事件
$(document).ready(function( ) {
loadFulltext();
//Load full text into the designated div
function loadFulltext(searchString){
//reset
$("#fulltext").html('');
filePath = 'http://localhost/income_tax_act_58_of_1962.html';
$.ajax({
url: filePath,
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/html; charset=UTF-8;" );
},
cache: false,
success: function(html){
$("#fulltext").html(html);
// if search string was defined, perform a search
if ((searchString != undefined) && (searchString != '') && (searchString != null)){
if(!searchAndHighlight(searchString, '#fulltext')) {
alert("No results found");
}
}
},
fail: function(){
alert('FAIL');
}
});
}
/* ------------------------------ CLICK - REFRESH DOCUMENTS LIST --- */
$(document).on('click', 'input[name="search-action"]', function ( event ){
// load fresh copy of full text into the div and perform a search once it is successfully completed
loadFulltext($('input[name="search-input"]').val());
});
});
JAVASCRIPT函数
function searchAndHighlight(searchTerm, selector) {
if(searchTerm) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
$('.match').removeClass('match'); //Remove old matches
//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);
// count amount of matches found
if(matches) {
alert('['+matches.length+'] matches found');
// replace new matches
$(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>"));
// add highligt to first matched class
$('.match:first').addClass('highlighted');
// keep track of next and previous. Start at one because on SEARCH the forst one was already highlightes
var matchIndex = 1;
// look out for user click on NEXT
$('#searchNext').on('click', function() {
//Re-set match index to create a wrap effect if the amount if next clicks exceeds the amount of matches found
if (matchIndex >= matches.length){
matchIndex = 0;
}
var currentMatch = $('.match');
currentMatch.removeClass('highlighted');
var nextMatch = $('.match').eq(matchIndex);
matchIndex += 1;
nextMatch.addClass('highlighted');
// scroll to the top of the next found instance -n to allow easy viewing
$(window).scrollTop(nextMatch.offset().top-30);
});
// look out for user click on PREVIOUS
$('#searchPrevious').on('click', function() {
//Re-set match index to create a wrap effect if the amount if next clicks exceeds the amount of matches found
if (matchIndex < 0){
matchIndex = matches.length-1;
}
var currentMatch = $('.match');
currentMatch.removeClass('highlighted');
var previousMatch = $('.match').eq(matchIndex-2);
matchIndex -= 1;
previousMatch.addClass('highlighted');
// scroll to the top of the next found instance -n to allow easy viewing
$(window).scrollTop(previousMatch.offset().top-30);
});
// if match found, scroll to where the first one appears
if($('.highlighted:first').length) {
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
}
return false;
}
相关文章:
- JQuery使用相同的功能自动完成各种输入文本
- jQuery自动完成功能不适用于多个文本输入
- 第二次点击具有不同功能的按钮并更改文本
- 触发功能时做机场插件文本效果
- JavaScript功能不会自动添加具有价格的文本框
- 正在寻找具有多种功能的文本编辑器
- 修复Javascript代码以将文本中的所有Youtube链接转换为Youtube ID功能
- jQuery:在整个文档上触发按键功能,但不在输入和文本区域内
- 如何在文本框中添加标签支持'点击粘贴'功能
- 使用功能更改文本并包含项目符号图像
- 具有搜索文本的功能,不能很好地处理标点符号/符号.Jquery/Jquery mobile.
- 在选择某些项目时显示文本和列表的功能
- 如果处理字符串值的文本区域是只读的,如何使用 JavaScript 在虚拟键盘上使用 CAPSLOCK 功能
- 如何将左/右箭头(下一个/上一个)功能添加到我的 jQuery 图像和文本滑块
- JavaScript键向下快捷功能,但如果在文本框中忽略
- 通过JS功能在中继器中启用文本框
- JSTREE - 重命名功能问题(单击重命名后,节点上的文本输入不接受更改)
- 带有文本显示js功能的图像映射 - 某些部分不显示
- 禁用使用AngularJs的文本框的剪切,复制和粘贴功能
- 使用带有动态文本框的 Google 地方信息自动完成功能