Поиск на странице

Поиск по странице с помощью jQuery

Многие посетители сайтов не знают о поиске по странице по нажатию Ctrl+F и ищут необходимый фрагмент глазами, просто пролистывая текст. Этот способ становится проблематичным, если на странице текста больше, чем три-четыре экрана. Для таких посетителей я решил реализовать поиск по странице с использованием jQuery.
Пример подобного поиска есть на сайте Конституции РФ, но там он работает как-то странно.

Предупреждение

Я не профессиональный программист, просьба не пинать за кривой код и возможное изобретение велосипеда.

HTML-форма

Первым делом разместим на странице HTML-код формы поиска. Форма включает два элемента — поле для ввода текста и DIV для вывода результатов поиска.

CSS

Настройка поиска

 var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш

Подсветка фрагментов

Базовая функциональность — подсветка фрагментов в тексте. Делается это с помощью регулярных выражений.

function dosearch() < term = jQuery('#spterm').val(); jQuery('span.highlight').each(function()< //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); >); var t = ''; jQuery('div.entry-content').each(function()< // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '$&')); // выделяем найденные фрагменты n = jQuery('span.highlight').length; // количество найденных фрагментов console.log('n = '+n); if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n); >); > jQuery('#spterm').keyup(function()< if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) < // проверяем длину строки dosearch(); // если все в порядке, приступаем к поиску >else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом >);

Переход между фрагментами

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

 if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n); if (n>1) // если больше одного фрагмента, то добавляем переход между ними < var i = 0; jQuery('span.highlight').each(function(i)< jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел >); jQuery('span.highlight').not(':last').attr().click(function()< // всем фрагментам, кроме последнего, добавляем подсказку jQuery('body,html').animate(, scrollspeed); // переход к следующему фрагменту >); jQuery('span.highlight:last').attr().click(function()< jQuery('body,html').animate(, 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(); // переходим к первому фрагменту >

jQuery(document).ready(function()< var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке 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(, scrollspeed); // переход к первому фрагменту >); function dosearch() < term = jQuery('#spterm').val(); jQuery('span.highlight').each(function()< //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); >); var t = ''; jQuery('div#content').each(function()< // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '$&')); // выделяем найденные фрагменты n = jQuery('span.highlight').length; // количество найденных фрагментов console.log('n = '+n); if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n+'. Перейти'); if (n>1) // если больше одного фрагмента, то добавляем переход между ними < var i = 0; jQuery('span.highlight').each(function(i)< jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел >); jQuery('span.highlight').not(':last').attr().click(function()< // всем фрагментам, кроме последнего, добавляем подсказку jQuery('body,html').animate(, scrollspeed); // переход к следующему фрагменту >); jQuery('span.highlight:last').attr().click(function()< jQuery('body,html').animate(, 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(); // переходим к первому фрагменту >>);

Недостатки

На больших страницах (примерно 60 кб текста) скрипт зависает на пару минут.

Спасибо за внимание, буду благодарен за замечания и идеи по улучшению работы скрипта.

Источник

Быстрый поиск с выводом результатов

Виджет на JQuery и AJAX, который покажет результаты поиска непосредственно при вводе в текстовое поле.

Форма

В обычную форму поиска добавляется пустой .

JQuery скрипт получает введенный в поле текст и отправляет его POST-запросом на обработчик /ajax_search.php , ответ выводится в всплывающей плашке.

$(document).ready(function() < var $result = $('#search_box-result'); $('#search').on('keyup', function()< var search = $(this).val(); if ((search != '') && (search.length >1))< $.ajax(< type: "POST", url: "/ajax_search.php", data: , success: function(msg) < $result.html(msg); if(msg != '')< $result.fadeIn(); >else < $result.fadeOut(100); >> >); > else < $result.html(''); $result.fadeOut(100); >>); $(document).on('click', function(e) < if (!$(e.target).closest('.search_box').length)< $result.html(''); $result.fadeOut(100); >>); $(document).on('click', '.search_result-name a', function()< $('#search').val($(this).text()); $result.fadeOut(100); return false; >); $(document).on('click', function(e) < if (!$(e.target).closest('.search_box').length)< $result.html(''); $result.fadeOut(100); >>); >);

Стили формы поиска и результатов:

.search_box < position: relative; >.search_box input[type="text"] < display: block; width: 100%; height: 35px; line-height: 35px; padding: 0; margin: 0; border: 1px solid #fd4836; outline: none; overflow: hidden; border-radius: 4px; background-color: rgb(255, 255, 255); text-indent: 15px; font-size: 14px; color: #222; >.search_box input[type="submit"] < display: inline-block; width: 17px; height: 17px; padding: 0; margin: 0; border: 0; outline: 0; overflow: hidden; text-indent: -999px; background: url(https://snipp.ru/demo/127/search.png) 0 0 no-repeat; position: absolute; top: 9px; right: 16px; >/* Стили для плашки с результатами */ .search_result

Источник

Поиск по странице на JavaScript

В этой статье мы разберём как сделать на JavaScript поиск на странице или если точнее по списку, будет крайне полезная и интересная статья.

Также рекомендую прочитать «Прогноз погоды на JavaScript», тоже крайне интересная и полезная статья.

Как создать поиск на JavaScript:

Для начала, перед созданием нам нужно сделать не большой HTML блок со списком, это делается всё очень просто, вот:

Здесь всё просто, мы просто создали не большой список, в котором храним ссылке, но это для примера.

Теперь перейдём самому главному, это самому поиску, для этого нам понадобится создать одну функцию, которая как раз и будет выполнять поиск, вот она:

В начале функции мы объявляем различного рода переменные, сначала берём наш input , потом создаём новую переменную присваиваем ей значение поля, но предварительно всю строку переводим в большой регистр, это нам пригодиться для сравнения.

Последнее берём ul и остальные элементы списка, который есть внутри него, проходимся по ним циклом, берём элемент a и сравниваем его, с переменной filter предварительно переводя высший регистр, всё это нужно, чтобы строки правильно сравнились, а при сравнение строк также учитывается и их регистр.

Если мы находим совпадение в строке ссылки, то тогда выставляем настройки display , пустую строку, иначе none , таким образом и работает поиск на JS.

Последние что нам осталось, это отследить, это событие нажатия клавиш, для этого вписываем такой код:

Источник

Проект: собственный поиск по странице на jQuery

Недавно мы говорили о библиотеках и фреймворках — и обещали, что попробуем что-нибудь на них собрать. Настало время.

Сегодня мы возьмём популярную библиотеку jQuery и сделаем на её основе поиск по странице. Браузеры это умеют делать встроенными инструментами, но с помощью нашего метода можно будет более тонко всё настроить и сделать поле поиска видимым и удобным.

• библиотека jQuery — она обеспечит работу нашего поискового плагина, потому что плагин сделан тоже для jQuery.
• плагин highlight — поможет нам найти нужные слова в тексте и подсветить их приятным цветом (каким захотим)
• поле ввода и кнопка — отвечают за сам интерфейс поиска.

Общая идея

У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.

Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение о том, что таких слов в тексте нет.

Готовим каркас

Сделаем как обычно — возьмём наш стандартный шаблон из предыдущих задач и немного поправим описания разделов. Сохраним его как .html-файл и открывать в браузере пока не будем — всё равно мы ничего не увидим на странице, кроме названия вкладки.

Добавляем форму поиска и текст

Наша форма поиска — это поле ввода и кнопка, которая запускает скрипт. Мы не будем сильно настраивать внешний вид формы, при желании вы можете сделать это сами — все нужные знания для этого у вас уже есть. Если что-то забыли — посмотрите, как мы настраивали вид поля ввода в статье про планировщик задач.

Добавим код формы сразу после тега :

Осталось добавить сам текст в блок . Для простоты мы скопируем первые абзацы этой статьи и обернём их в HTML-теги. Вы можете вставить какой угодно текст, на работу скрипта это никак не повлияет.

Общая идея

У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.

Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение, что таких слов в тексте нет.

Сохраняем, открываем в браузере:

Настраиваем стили

Стили отвечают за внешний вид всех элементов на странице. Главное, что нам нужно сделать, — нормальный внешний вид формы поиска и выбрать подсветку для найденных результатов. Это мы настроим в блоке в начале страницы:

/*поле ввода*/ .searchtext < font-size: 16px; font-weight: bold; height: 27px; padding: 0 6px 0; width: 250px; /*делаем стильную границу вокруг поля*/ border: 1px solid rgba(0, 0, 0, 0.1); >/* выбираем цвет подсветки — светло-зелёный*/ .highlight < background: #4cff00; >/*кнопка поиска*/ .search-button < background-color: #0b2f3f; font-weight: bold; font-size: 12px; /*устанавливаем высоту кнопки*/ height: 28px; margin: 0; color: #ffffff; padding: 6px; /*тоже делаем стильную границу у кнопки*/ border: 1px solid rgba(0, 0, 0, 0.1); >

Сохраняем и обновляем страницу — теперь форма выглядит лучше:

Пишем скрипт

Задача скрипта — пробежаться по всему содержимому текста и сравнить все слова с тем, что мы ввели в строке поиска. Всю работу за нас сделает плагин highlight, нам остаётся только вывести количество найденных совпадений и очистить страницу от предыдущих результатов поиска.

           
 
Чтобы лучше понять, как работают библиотеки и плагины в веб-программировании, давайте с их помощью сделаем удобный поиск по странице. Мы знаем, что современные браузеры тоже умеют это делать, но мы сделаем свою версию, которая работает не хуже, чем в Хроме или Сафари. 
Общая идея
 
У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.
 
Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение о том, что таких слов в тексте нет.
 
 

Как можно улучшить

Можно убрать кнопку «Найти» и запускать поиск при вводе текста в поле.

Можно сделать два поля ввода, подсвечивая найденное по каждому разными цветами. Это полезно, например, если нужно проанализировать, каких слов в тексте больше.

Регулярные выражения! О них отдельно напишем, это же просто праздник какой-то.

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Источник