需要一些幫助，從jquery頁面搜索文本？

Question

我正在從頁面搜索文本。我的功能工作正常，但我的問題是，點擊一個搜索按鈕時，它首先搜索。但當用戶再次點擊搜索按鈕應該去下一個搜索，但它不會。但是點擊下一步它將進入下一步。我需要在下一個搜索按鈕上使用相同的功能。這裏是我的小提琴

http://jsfiddle.net/ravi1989/wjLmx/28/

function searchAndHighlight(searchTerm, selector) { 
    if (searchTerm) { 
     var searchTermRegEx, matches, selector = selector || "#realTimeContents"; 
     try { 
      searchTermRegEx = new RegExp('('+searchTerm+')', "ig"); 
     } catch (e) { 
      return false; 
     } 
     matches = $(selector).text().match(searchTermRegEx); 
     if (matches != null && matches.length > 0) { 
      $('.highlighted').removeClass('highlighted'); 

      $span = $('#realTimeContents span'); 
      $span.replaceWith($span.html()); 

      var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>'); 

      $(selector).html(txt); 

      $('.match:first').addClass('highlighted'); 

      var i = 0; 
       $('.searchButtonClickText_h').off('click').on('click', function() { 
       i++; 
       alert("OO") 
       if (i >= $('.match').length) i = 0; 

       $('.match').removeClass('highlighted'); 
       $('.match').eq(i).addClass('highlighted'); 
       $('.ui-mobile-viewport').animate({ 
        scrollTop: $('.match').eq(i).offset().top 
       }, 300); 
      }); 

      $('.next_h').off('click').on('click', function() { 
       i++; 

       if (i >= $('.match').length) i = 0; 

       $('.match').removeClass('highlighted'); 
       $('.match').eq(i).addClass('highlighted'); 
       $('.ui-mobile-viewport').animate({ 
        scrollTop: $('.match').eq(i).offset().top 
       }, 300); 
      }); 
      $('.previous_h').off('click').on('click', function() { 

       i--; 

       if (i < 0) i = $('.match').length - 1; 

       $('.match').removeClass('highlighted'); 
       $('.match').eq(i).addClass('highlighted'); 
       $('.ui-mobile-viewport').animate({ 
        scrollTop: $('.match').eq(i).offset().top 
       }, 300); 
      }); 




      if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears 
       $(window).scrollTop($('.highlighted:first').position().top); 
      } 
      return true; 
     } 
    } 
    return false; 
} 


$(document).on('click', '.searchButtonClickText_h', function (event) { 

    $(".highlighted").removeClass("highlighted").removeClass("match"); 
    if (!searchAndHighlight($('.textSearchvalue_h').val())) { 
     alert("No results found"); 
    } 


}); 

我需要用戶去下一個在用戶點擊搜索按鈕，因爲它是在一個按鈕去？

Answer 1

DEMO和AutoSearch DEMO

這裏是代碼 -

var searchIndex = -1; 
var searchTermOld =''; 

$(document).ready(function(){ 
    $('.searchbox').on('change',function(){ 
    if($(this).val()===''){ 
     var selector= "#realTimeContents"; 
     $(selector+' span.match').each(function(){ 
     $(this).replaceWith($(this).html()); 
    }); 
    } 
    searchIndex = -1; 
    $('.searchNext').attr("disabled", "disabled"); 
    $('.searchPrev').attr("disabled", "disabled"); 
    searchTermOld = $(this).val(); 
}); 
    $('.searchbox').on('keyup',function(){ 

    var selector= "#realTimeContents"; 
    if($(this).val()===''){ 
     $(selector+' span.match').each(function(){ 
     $(this).replaceWith($(this).html()); 
    }); 
    } 
    if($(this).val() !== searchTermOld){ 
     $(selector+' span.match').each(function(){ 
     $(this).replaceWith($(this).html()); 
    }); 
     searchIndex = -1; 
     $('.searchNext').attr("disabled", "disabled"); 
     $('.searchPrev').attr("disabled", "disabled");        
    } 
}); 
    $('.search').on('click',function(){ 
    if(searchIndex == -1){ 
     var searchTerm = $('.searchbox').val(); 
     searchAndHighlight(searchTerm); 
    } 
    else searchNext(); 
    if($('.match').length >1){ 
     $('.searchNext').removeAttr("disabled"); 
     $('.searchPrev').removeAttr("disabled"); 
    } 
}); 
    $('.searchNext').on('click',searchNext); 

    $('.searchPrev').on('click',searchPrev); 
}); 

function searchAndHighlight(searchTerm) { 
    if (searchTerm) { 
     var searchTermRegEx, matches; 
     var selector= "#realTimeContents"; 
     $(selector+' span.match').each(function(){ 
      $(this).replaceWith($(this).html()); 
     }); 
     try { 
      searchTermRegEx = new RegExp('('+searchTerm+')', "ig"); 
     } catch (e) { 
      return false; 
     } 
     $('.highlighted').removeClass('highlighted'); 
     matches = $(selector).text().match(searchTermRegEx); 
     if (matches !==null && matches.length > 0) { 
      var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>'); 
      $(selector).html(txt); 
      searchIndex++; 
      $('.match:first').addClass('highlighted'); 
      $(document).scrollTop($('.match').eq(searchIndex).offset().top); 

      return true; 
     } 
     return false; 
    } 
    return false; 
} 

function searchNext(){ 
    searchIndex++; 
    if (searchIndex >= $('.match').length) searchIndex = 0; 
    $('.highlighted').removeClass('highlighted'); 
    $('.match').eq(searchIndex).addClass('highlighted'); 
    $(document).scrollTop($('.match').eq(searchIndex).offset().top); 
} 

function searchPrev(){ 
    searchIndex--; 
    if (searchIndex < 0) searchIndex = $('.match').length - 1; 
    $('.highlighted').removeClass('highlighted'); 
    $('.match').eq(searchIndex).addClass('highlighted'); 
    $(document).scrollTop($('.match').eq(searchIndex).offset().top); 
} 

Answer 2

僞代碼：

if(highlighted span != search input) { 

    Search again 

}else{ 

    Go to next, trigger click on `.next_h` 

}