0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 449 Просмотров
*

x1

  • Захожу иногда
  • 406
  • 14 / 0
  • Linux — это Windows для бытовой техники
Как можно сделать поиск внутри материала? Не поиск материалов по категриям или тегам, а именно реализовать поиск внутри материала, при его просмотре?
« Последнее редактирование: 16.05.2016, 12:37:12 от x1 »
*

KKAAZZOO

  • Живу я здесь
  • 2135
  • 111 / 9
*

x1

  • Захожу иногда
  • 406
  • 14 / 0
  • Linux — это Windows для бытовой техники
ctrl+f
Это очень круто. Мне придется писать целый мануал, что такое Ctrl, где его искать, и что такое "плюс" (его нажимать оказывается не надо)... У меня начальник будет искать такую клавишу 2 дня. Предполагается, что перед материалом имеется строка поискового запроса и клавиша найти.  Зачем это нужно: представьте себе материал, в нем таблица с  200 параграфами. Нужно перейти к нужному абзацу.
*

vipiusss

  • Гуру
  • 5749
  • 343 / 10
  • Скайп: renor_
http://ruseller.com/adds/adds2000/example/
Плагин jQuery для поиска аля "special for boss".
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

robert

  • Живу я здесь
  • 4335
  • 412 / 15
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.
*

x1

  • Захожу иногда
  • 406
  • 14 / 0
  • Linux — это Windows для бытовой техники
https://jsfiddle.net/n_robert/ksf21r1m/
Самое то! Плюсик добавил. Может кому пригодится:

Файлик скрипта обзываем "search.js"  и помещаем на хостинг, например  http://your-site.com/templates/t3_blank/js/search.js
Содержимое search.js:
Код
(function($) {
  $(document).ready(function() {
    $(document).on('click', '#search', function() {
      $('html,body').animate({
        scrollTop: $(document).find('p:contains("' + $('#keyword').val() + '")').offset().top
      }, 500);
    });
  });
})(jQuery);

В материал вставляем (не забываем отключить редактор):
Код
<input type="text" id="keyword" value="Что ищем" />
<input type="button" id="search" value="Search" />

<script type="text/javascript" src="http://your-site.com/templates/t3_blank/js/search.js">
</script>
« Последнее редактирование: 16.05.2016, 12:04:35 от x1 »
*

x1

  • Захожу иногда
  • 406
  • 14 / 0
  • Linux — это Windows для бытовой техники
И что бы поставить точку в теме, альтернативное решение: найти в тексте материала слово или слова и выделить их цветом.

Создать файл "highlight.js" и записать его на хостинг:

Код
// highlight

$.fn.highlight = function (b, k) {
   function l() {
       $("." + c.className).each(function (c, e) {
           var a = e.previousSibling,
               d = e.nextSibling,
               b = $(e),
               f = "";
           a && 3 == a.nodeType && (f += a.data, a.parentNode.removeChild(a));
           e.firstChild && (f += e.firstChild.data);
           d && 3 == d.nodeType && (f += d.data, d.parentNode.removeChild(d));
           b.replaceWith(f)
       })
   }

   function h(b) {
       b = b.childNodes;
       for (var e = b.length, a; a = b[--e];)
           if (3 == a.nodeType) {
               if (!/^\s+$/.test(a.data)) {
                   var d = a.data,
                       d = d.replace(m, '<span class="' + c.className + '">$1</span>');
                   $(a).replaceWith(d)
               }
           } else 1 == a.nodeType && a.childNodes && (!/(script|style)/i.test(a.tagName) && a.className != c.className) && h(a)
   }
   var c = {
       split: "\\s+",
       className: "highlight",
       caseSensitive: !1,
       strictly: !1,
       remove: !0
   }, c = $.extend(c, k);
   c.remove && l();
   b = $.trim(b);
   var g = c.strictly ? "" : "\\S*",
       m = RegExp("(" + g + b.replace(RegExp(c.split, "g"), g + "|" + g) + g + ")", (c.caseSensitive ? "" : "i") + "g");
   return this.each(function () {
       b && h(this)
   })
};

$(function () {
$('#scan').click(function () {
      var settings = {};
      var pattern = $('#pattern').val();
      $("#right").prop("checked") && (settings.strictly = true);
      $("#case").prop("checked") && (settings.caseSensitive = true);
      $("#remove").prop("checked") && (settings.remove = false);
      pattern && $("div").highlight(pattern, settings)
  })
})


В материал статьи вставить:
Код

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://your-site.com/templates/t3_blank/js/highlight.js"></script>

<form>
    <input id="pattern" name="" value="Что ищем"><label>Слова через пробел|ы</label><br>
    <input id="right" name="" type="checkbox"><label>Точное совпадение</label><br>
    <input id="case" name="" type="checkbox"><label>Учитывать регистр</label><br>
    <input id="remove" name="" type="checkbox"><label>Сохранить предыдущее выделение</label><br>
    <input id="scan" name="" type="button" value="Найти">
</form>

Поправьте путь к скрипту highlight.js на вашем сайте, у меня так, в папке шаблона: "http://your-site.com/templates/t3_blank/js/highlight.js",
но можно и в отдельную папку "js": "http://your-site.com/js/highlight.js"

Изменить стиль подсветки можно так например:
 
Код
span.highlight {
    background-color: #ddd;
    border-radius: 4px 4px 4px 4px;
    padding: 4px 14px;
   }

Взято от сюда: http://javascript.ru/forum/project/40276-jquery-highlight-plugin-%E2%80%94-podsvetka-slov-v-tekste.html
« Последнее редактирование: 16.05.2016, 18:07:33 от x1 »
*

x1

  • Захожу иногда
  • 406
  • 14 / 0
  • Linux — это Windows для бытовой техники
Есть большое желание продолжить эту тему, например так - есть ли у кого нибудь решение поиска и подсветки в многостраничном документе?
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Фильтр стандартного материала

Автор dimasan57

Ответов: 0
Просмотров: 206
Последний ответ 28.10.2017, 17:33:54
от dimasan57
Необходим поиск материалов по первым буквам заголовка материала

Автор help-tend

Ответов: 2
Просмотров: 114
Последний ответ 03.10.2017, 19:58:15
от voland
Поиск по полям материалов

Автор Zelyonkin

Ответов: 3
Просмотров: 246
Последний ответ 14.09.2017, 12:23:26
от Septdir
Превью материала из видео

Автор lalalag

Ответов: 13
Просмотров: 412
Последний ответ 30.05.2017, 14:12:22
от Septdir
Поиск компонента для перевода денег между пользователями

Автор Я Тимур

Ответов: 8
Просмотров: 237
Последний ответ 28.05.2017, 06:40:51
от rkron