Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2019, 11:01
Новичок на форуме
Отправить личное сообщение для Glomar Посмотреть профиль Найти все сообщения от Glomar
 
Регистрация: 22.02.2019
Сообщений: 3

Поиск с переходом на одностраничнике
Не являюсь профессионалом в JS и прошу помочь с кодом.

Данный скрипт позволяет искать вбитые слова в input (кто-то скорее всего его уже видел), так вот, добавил ещё один элемент ( <div id="further" class="conclusion"> </div> ) для того, чтобы при нажатии на него, переходить по найденным словам, в скрипте это реализовано в виде нажатия на выделенный текс, но это не подходит.

Прошу помощи профессионалов!

<div class="search">
<input id="spterm" type="text" name="spterm" class="dx-search-input search-input" placeholder="Поиск">							
</div>
<div id="spresult" class="conclusion">  </div>
<div id="further" class="conclusion">  </div>


jQuery(document).ready(function(){

  var minlen = 2; // минимальная длина слова
  var paddingtop = 150; // отступ сверху при прокрутке
  var scrollspeed = 200; // время прокрутки
  var keyint = 1000; // интервал между нажатиями клавиш
  var term = '';
  var n = 0;
  var time_keyup = 0;
  var time_search = 0;
 
  jQuery('body').delegate('#spgo', 'click', function(){
    jQuery('body,html').animate({scrollTop: jQuery('span.highlight:first').offset().top-paddingtop}, scrollspeed); // переход к первому фрагменту
  });

   function dosearch() {

    term = jQuery('#spterm').val();
    jQuery('span.highlight').each(function(){ //удаляем старую подсветку
      jQuery(this).after(jQuery(this).html()).remove();  
    });
    var t = '';

    jQuery('div#contents').each(function(){ // в селекторе задаем область поиска

      jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '<span class="highlight">$&</span>')); // выделяем найденные фрагменты
      n = jQuery('span.highlight').length; // количество найденных фрагментов
      console.log('n = '+n);

      if (n==0){
        jQuery('#spresult').html('<i class="fas fa-filter"></i>');
      }else{
        jQuery('#spresult').html('<i class="fas fa-filter"></i> <b>'+n+'</b> <span class="splink" id="spgo"><i class="fas fa-external-link-alt"></i></span>');
      }

      if (n>1) // если больше одного фрагмента, то добавляем переход между ними
      {
        var i = 0;
        jQuery('#further').html('<span class="splink" id="furthers"><i class="fas fa-angle-down"></i></span>');

        jQuery('span.highlight').each(function(i){
          jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел
        });
        jQuery('span.highlight').not(':last').attr({title: 'Нажмите, чтобы перейти к следующему фрагменту'}).click(function(){ // всем фрагментам, кроме последнего, добавляем подсказку
          jQuery('body,html').animate({scrollTop: jQuery('span.highlight:gt('+jQuery(this).attr('n')+'):first').offset().top-paddingtop}, scrollspeed); // переход к следующему фрагменту
        });
        jQuery('span.highlight:last').attr({title: 'Нажмите, чтобы вернуться к форме поиска'}).click(function(){
          jQuery('body,html').animate({scrollTop: jQuery('#spterm').offset().top-paddingtop}, scrollspeed); // переход к форме поиска
        });
      } 

    });

   }

  jQuery('#spterm').keyup(function(){
    var d1 = new Date();
    time_keyup = d1.getTime();
    if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка
      if (jQuery('#spterm').val().length>=minlen) { // проверяем длину строки
        setTimeout(function(){ // ждем следующего нажатия
         var d2 = new Date();
         time_search = d2.getTime();
         if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями
          dosearch(); // если все в порядке, приступаем к поиску
        }, keyint);}
      else
        jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом 
  });	
 
  if (window.location.hash!="") // бонус
  {
    var t = window.location.hash.substr(1, 50); // вырезаем текст
    jQuery('#spterm').val(t).keyup(); // вставляем его в форму поиска
    jQuery('#spgo').click(); // переходим к первому фрагменту
  } 

});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сделать поиск со стороннего сайта kozlik Работа 1 19.09.2014 12:23
Живой поиск JQUERY + AJAX + PHP + MYSQL dimi007 AJAX и COMET 2 22.07.2014 13:50
select отключить встроенный поиск skynet-mfd jQuery 0 04.03.2013 11:26
Поиск в тексте javascript jQuery 3 31.05.2011 11:40
Поиск в массиве через JavaScript Noran Общие вопросы Javascript 0 10.08.2008 17:31