Need some help in searching a text from page in jquery?

Question

I am searching a text from page. My function is working fine but my Problem is that on clicking a search button it search first .But when user click again search button it should go to next search but it is not going. But on clicking the next it is going to next.I need same functionality on next and search button. Here is my fiddle

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");
    }


});

I need user go to next when user click the search button as it is going in next button ?

Answer 1

DEMO and AutoSearch DEMO

Here is the code -

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

Pseudo code:

if(highlighted span != search input) {

    Search again

}else{

    Go to next, trigger click on `.next_h`

}