js поиск на странице

188
14 мая 2018, 04:30

Всем привет, по ссылке ниже есть скрипт для поиска по странице, но проблема в том, что он начинает искать сразу после ввода в текстовое поле, а когда нажимаешь на стрелки соответсвенно переходит ко второму уже пункту, мне надо, что-бы он искал только после нажатия на "вперед", "назад"

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

https://damonlsd.ru/jquery-poisk-i-podsvetka-teksta/

Сам скрипт:

jQuery(document).ready(function() { 
  var search_number = 0; 
  var search_count = 0; 
  var count_text = 0; 
  var srch_numb = 0; 
 
  function scroll_to_word() { 
    var pos = $('body .selectHighlight').position(); 
    jQuery.scrollTo(".selectHighlight", 500, { 
      offset: -150 
    }); 
  } 
 
  $('#search_text').bind('keyup oncnange', function() { 
    $('body').removeHighlight(); 
    txt = $('#search_text').val(); 
    if (txt == '') return; 
 
    $('body').highlight(txt); 
    search_count = $('body span.highlight').length - 1; 
    count_text = search_count + 1; 
    search_number = 0; 
    //$('body').selectHighlight(search_number); 
    if (search_count >= 0) scroll_to_word(); 
    $('#count').html('Найдено: <b>' + count_text + '</b>'); 
    $('ul').removeClass('ng-scope ng-hide'); 
    $('ul').addClass('ng-scope'); 
    //  $('#search_block').css("z-index", "50"); 
    //	$("#search_block").css("position", "fixed"); 
    //	$("#search_block").css("background-color", "#dddddd"); 
    //	$("#search_block").css("padding", "15px"); 
    //		$("#search_block").css("border-radius","6px"); 
    //	$("#search_block").css("opacity", "0.9"); 
  }); 
 
  $('#clear_button').click(function() { 
    $('body').removeHighlight(); 
    $('#search_text').val(''); 
    $('#count').html(''); 
    jQuery.scrollTo(0, 500, { 
      queue: true 
    }); 
    $('#search_block').css("z-index", "0"); 
    $("#search_block").css("position", "relative"); 
    $("#search_block").css("background-color", "#f3f3f3"); 
    $("#search_block").css("padding", "0px"); 
    $("#search_block").css("border-radius", "0px"); 
    $("#search_block").css("opacity", "1"); 
    //	$('ul').removeClass('ng-scope'); 
    //	$('ul').addClass('ng-scope ng-hide'); 
  }); 
 
  $('#prev_search').click(function() { 
    if (search_number == 0) return; 
    $('body .selectHighlight').removeClass('selectHighlight'); 
    search_number--; 
    srch_numb = search_number + 1; 
    $('body').selectHighlight(search_number); 
    if (search_count >= 0) { 
      scroll_to_word(); 
      $('#count').html(srch_numb + '</b> из ' + $('body span.highlight').length); 
    } 
  }); 
 
  $('#next_search').click(function() { 
    var marker = 0; 
    if (marker == 0) { 
      $('#search_block').css("z-index", "50"); 
      $("#search_block").css("position", "fixed"); 
      $("#search_block").css("background-color", "#dddddd"); 
      $("#search_block").css("padding", "15px"); 
      $("#search_block").css("border-radius", "6px"); 
      $("#search_block").css("opacity", "0.9"); 
      marker = 1; 
    } 
    if (search_number == search_count) return; 
    $('body .selectHighlight').removeClass('selectHighlight'); 
    search_number++; 
    srch_numb = search_number + 1; 
    $('body').selectHighlight(search_number); 
    if (search_count >= 0) { 
      scroll_to_word(); 
      $('#count').html(+srch_numb + '</b> из ' + $('body span.highlight').length); 
    } 
  }); 
});

Answer 1
$('#search_text').bind('keyup oncnange', function() {
    $('body').removeHighlight();
    txt = $('#search_text').val();
    if (txt == '') return;
    $('body').highlight(txt);
    search_count = $('body span.highlight').length - 1;
    count_text = search_count + 1;
    search_number = 0;
    //$('body').selectHighlight(search_number);
    // ЗАКОММЕНТИРУЙТЕ
    // if (search_count >= 0) scroll_to_word();
    $('#count').html('Найдено: <b>' + count_text + '</b>');
    $('ul').removeClass('ng-scope ng-hide');
    $('ul').addClass('ng-scope');
    //  $('#search_block').css("z-index", "50");
    //  $("#search_block").css("position", "fixed");
    //  $("#search_block").css("background-color", "#dddddd");
    //  $("#search_block").css("padding", "15px");
    //      $("#search_block").css("border-radius","6px");
    //  $("#search_block").css("opacity", "0.9");
  });
READ ALSO
Модальное окно через таймер

Модальное окно через таймер

Возможно ли как то установить таймер этому плагину pop -up окна чтобы когда user зашел на страницу через к примеру 2 секунды сработал скрипт а не по клику

217
Анимация DOM-узла в момент удаления его из DOM

Анимация DOM-узла в момент удаления его из DOM

В DOM-записывается новый элемент, затем по истечению 2-х секунд он удаляетсяКак анимировать этот элемент в момент удаления из DOM? Например, чтобы...

177
Не работает tubular js в IE 10

Не работает tubular js в IE 10

Поставил на бэкграунд видео с ютуба, но заметил, что загружается оно не каждый разА в IE вообще не показывается

198
Динамический select Angular2

Динамический select Angular2

Как в Angular2 сделать динамические select-ы? Те есть три селекта: страна, город, улица

189