Вставить форму поиска по тексту для html-страницы без бд

#1 10 марта 2020 в 13:31
Здравствуйте.

Подскажите, пожалуйста, есть код чтобы вставить форму поиска по тексту для html-страницы без бд?

Вот есть:

  1. <script type="text/javascript">
  2. var lastResFind=""; // последний удачный результат
  3. var copy_page=""; // копия страницы в ихсодном виде
  4. function TrimStr(s) {
  5. s = s.replace( /^\s+/g, '');
  6. return s.replace( /\s+$/g, '');
  7. }
  8. function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
  9. var obj = window.document.getElementById(inputId);
  10. var textToFind;
  11.  
  12. if (obj) {
  13. textToFind = TrimStr(obj.value);//обрезаем пробелы
  14. } else {
  15. alert("Введенная фраза не найдена");
  16. return;
  17. }
  18. if (textToFind == "") {
  19. alert("Вы ничего не ввели");
  20. return;
  21. }
  22.  
  23. if(document.body.innerHTML.indexOf(textToFind)=="-1")
  24. alert("Ничего не найдено, проверьте правильность ввода!");
  25.  
  26. if(copy_page.length>0)
  27. document.body.innerHTML=copy_page;
  28. else copy_page=document.body.innerHTML;
  29.  
  30.  
  31. document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
  32. document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:red'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
  33. lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
  34. window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
  35. }
  36. </script>

  1. <input type="text" id="text-to-find" value="">
  2. <input type="button" onclick="javascript: FindOnPage('text-to-find'); return false;" value="Искать"/>

Первый вставляю в хед, второй в боди.


Там просто выделяются красным запрашиваемые слова. Методом прокручивания страницы можно на эти слова набрести.

А нужно чтобы сразу происходило прокручивание к этим словам.


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

Пару раз перезагрузил страницу и эта форма пропала.

Потом самыми разными вариантами вставлял эти коды, один раз ещё достиг нужно эффекта, и опять пропало.
#2 11 марта 2020 в 00:19

А нужно чтобы сразу происходило прокручивание к этим словам.

Polzovinst

Может классический вариант подойдет, с подсказкой для пользователя- нажмите ctrl + f ?!


И вес страници останется ~прежним.

п.с. мне кажется что на маленьких картинках вотермарк не в тему еще и смысл испоганился laugh!
#3 11 марта 2020 в 01:05


Может классический вариант подойдет, с подсказкой для пользователя- нажмите ctrl + f ?!

Mort Rainey
Крутяк. Спасибо) Теперь хоть буду знать.
Где Вы раньше были?)
Я только закончил многочасовой поиск по тексту для почти личных нужд. Думал реализовать его для людей (специфическая тема).

Да, ctrl + f это тот самый вариант, который временно работал при установке кода.
Не знаю куда он девается.

А именно этот вариант с "ctrl + f" можно как-то на страницу кодом встроить?


п.с. мне кажется что на маленьких картинках вотермарк не в тему еще и смысл испоганился laugh!

Mort Rainey
Иногда для этого приходится картинку вниз удлинять.
#4 11 марта 2020 в 04:20

А именно этот вариант с "ctrl + f" можно как-то на страницу кодом встроить?

Polzovinst
Можно. Через html-виджет. Только уже не совсем классика… (сырой вариант) работает в том числе и через ктрл + Ф

1 — качаем и заливаем в /templates/default/js/ файл js — search.js

2 — Смотрим через консоль где там у нас главный блок с контентом <article> <section> или <div>
в search.js находим var content_id = "main_content"; ставим свой ID ( var content_id = "мой-айди" )

2 — В html-виджет вставляем код
  1.  
  2. <input type="text" id="search_val" class="search" name="" value="" placeholder="Введите искомое слово и нажмите Enter...">
  3.  
  4. <style>.found{background-color:#FFC107;}#search_val{width:100%;}</style>
  5.  
  6. <script type="text/javascript" src="/templates/default/js/search.js"></script>
  7.  
Прикрепленный файл
search_p5feb.zip 2 Кб
#5 11 марта 2020 в 04:25
Спасибо. Сорри, именно в данном случае речь шла просто об обычной html-странице, не на Инстанте.
#6 11 марта 2020 в 04:29
У скрипта нет привязки к cms.
На любой html странице разместить сообщение — Нажмите контрл Ф v
#7 11 марта 2020 в 04:39
1) Скрипт закинул в нужную папку

2) В коде:
  1. <style>.found{background-color:#FFC107;}#search_val{width:100%;}</style>
  2. <script type="text/javascript" src="/папка/search.js"></script>
указал путь.

Код разместил в хеде.

3) Этот код
  1. <input type="text" id="search_val" class="search" name="" value="" placeholder="Введите искомое слово и нажмите Enter...">
разместил в боди.

Форма отображается, запрос пока не обрабатывается.
#8 11 марта 2020 в 04:58


1) Скрипт закинул в нужную папку

2) В коде:

  1. .found{background-color:#FFC107;}#search_val{width:100%;}
  2.  
указал путь.

Код разместил в хеде.

3) Этот код
разместил в боди.

Форма отображается, запрос пока не обрабатывается.

Polzovinst

У боди должен быть ID=""
Js должен быть ниже <input type="text" id="search_val"

В сообщении правильная последовательность, надо внимательнее быть.
#9 11 марта 2020 в 05:10


У боди должен быть ID=""

Mort Rainey
Увы с таким никогда не сталкивался.


Вот кстати хорошее оформление (в архиве)

Как только прикручивать, совместив с Вашим скриптом, затрудняюсь.


Тема не так актуальна, как была вчера, но очень интересная, и вполне может пригодиться, так что продолжаем.
Прикрепленный файл
demo_1503_857uv.zip 2 Кб
#10 11 марта 2020 в 05:54
в search.js находим var content_id = "main_content"; ставим свой ID ( var content_id = "body" )

Тогда — var content_id = "body"
В оригинале (шаблон инсты)
  1.  
  2. <div id="body">
  3. <?php
  4. $is_sidebar = $this->hasWidgetsOn('right-top', 'right-center', 'right-bottom');
  5. $section_width = $is_sidebar ? '730px' : '100%';
  6. ?>
  7.  
#11 11 марта 2020 в 06:33

Как только прикручивать, совместив с Вашим скриптом, затрудняюсь.

Polzovinst
Да так же… в html-виджет закинуть.
#12 11 марта 2020 в 06:38


Как только прикручивать, совместив с Вашим скриптом, затрудняюсь.

Polzovinst

на здоровье laugh



Прикрепленный файл
index_p5feb.zip 3 Кб
#13 14 марта 2020 в 06:20
Дмитрий, спасибо.

Попробовал для начала на инстанте.

Поиск происходит выделением жёлтым, и, нужно самому крутить по тексту.

Можно ли сделать как при ctrl+f чтобы происходила прокрутка к искомому тексту?

Также зелёным покрасивее, чем жёлтым.
#14 14 марта 2020 в 07:11
Нет. Этот js слабоват для таких запросов, надо искать и переписывать другой.
классический вариант, с подсказкой для пользователя- нажмите ctrl + f в любом случае лучше всего.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.