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`

}

在jquery中从页面搜索文本需要一些帮助吗？

2 个答案: