1
     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 || "#realTimeContents"; //use body as selector if none provided
    var searchTermRegEx = new RegExp(searchTerm, "ig");
    var matches = $(selector).text().match(searchTermRegEx);
    if (matches != null && matches.length > 0) {
      $('.highlighted').removeClass('highlighted'); //Remove old search highlights  

      //Remove the previous matches
      $span = $('#realTimeContents span');
      $span.replaceWith($span.html());

      if (searchTerm === "&") {
        searchTerm = "&";
        searchTermRegEx = new RegExp(searchTerm, "ig");
      }
      $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
      $('.match:first').addClass('highlighted');
      $('.next_h').addClass('visible');
      var i = 0;

      $('.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
        });
      });

      $(".next_h").click(function () {

        $([document.documentElement, document.body]).animate({

          scrollTop: $(".highlighted:first").offset().top
        });
      });

      if ($('.highlighted:first').length) { 
        $(window).scrollTop($('.highlighted:first').position().top);
      }
      return true;
    }
  }
  return false;
}

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

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


});
$(document).on('click', '.textSearchvalue_h', function (event) {
  $(".next_h").removeClass('visible');
  $('.searchButtonClickText_h').removeClass('novisibity');


  $(".highlighted").removeClass("highlighted").removeClass("match");


});

Использую этот код для поиска слов на странице, но если в поисковую сроку повторно задать новое слово для поиска, при переходе между найденными словами экран начинает прыгать верх в низ, и после прыжков останавливается на найденном слове. Я подозреваю что это проблема в animate и его сочетании с scrollTop. Как это можно исправить

1
  • 1
    Очень бы помогла демонстрация, может быть получится оформить в jsfiddle.net?
    – Skywave
    Commented 31 мая 2019 в 10:20

1 ответ 1

1
.animate({scrollTop: $(".highlighted:first").offset().top}, 500, 'swing');

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.