Скрипт поиск по странице на javascript. Поиск по странице с помощью jQuery. Выезжающее поле поиска

Недавно делал поиск по странице средствами jQuery. Пока разбирался, как лучше сделать, чтоб оптимально подходило для навигации по контенту на странице, получилось 2 варианта поиска. В итоге для моих нужд лучше подошёл второй вариант, но расскажу сегодня об обоих.

В первом варианте поиск будет вестись по всем словам (символам) в заданной части документа. Во втором варианте список слов задаётся изначально, по мере ввода символов в строку поиска будут предлагаться содержащие их слова. Своего рода поисковые подсказки.

1й вариант

Подключаем библиотеку jQuery, плагин higlighting отвечающий за поиск и выделение в тексте совпавших значений и скрипт который будет обрабатывать поисковые запросы. Скрипт запускается при клике по элементу с id=»submit» .

$(document).ready(function(){ $("#submit").click(function(){ var term = ""; var n = "0"; $("body").removeHighlight(); $("p.results").hide().empty(); term = $("#term").attr("value"); if($("#term").val() == ""){ $("p.results").fadeIn().append("Enter search query in field above"); return false; }else{ $(".main").highlight(term); n = $("span.highlight").length; if(n == 0){ $("p.results").fadeIn().append("Not found"); }else{ $("p.results").fadeIn().append("Found: "+n+" matches."); } return false; } }); });

переменная term — получает значение поискового запроса;
переменная n — отвечает за количество найденных совпадений;
функция removeHighlight() — удаляет предыдущие результаты поиска;
функция hide() — скрывает блок с информацией о результатах поиска;
функция empty() — удаляет содержимое блока с результатами поиска;
функция fadeIn() — делает видимым блок с информацией о результатах поиска;
функция append() — добавляет контент в блок с информацией о результатах поиска;
функция highlight() — обрамляет все совпавшие с поисковым запросом слова в тег span с class=»highlight»;
свойство length — возвратит число найденных совпадений на странице.

Между тегами body нужно вставить форму для ввода поисковых запросов, контейнер для вывода информации о результатах поиска и блок с классом main внутри которого будет производится поиск.

Контент

2й вариант

Подключаем файл с стилями, виджет jQuery UI: Autocomplete , библиотеку jQuery, плагин higlighting отвечающий за поиск и выделение в тексте совпавших значений и скрипт который будет обрабатывать поисковые запросы.

$(function() { var availableTags = [ "ActionScript", "BASIC", "C++", "Delphi", "Java", "JavaScript", "Pascal", "PHP", "Python", "Ruby", "Visual Fortran" ]; $("#tags").autocomplete({ source: availableTags }); }); $(document).ready(function(){ $("#submit").click(function(){ var term = "#"; var tags = ""; $("body").removeHighlight(); if($("#tags").val() != "") { term += $("#tags").val(); tags = $("#tags").attr("value"); } $("h3").highlight(tags); location.href = term.toLowerCase(); }); });

переменная term – отвечает за формирование ссылки на закладку, начинается символом #, затем идет название закладки (значение поискового запроса);
переменная tags – получает значение поискового запроса;
функция toLowerCase() — приводит строку к нижнему регистру;

В данном случае поиск будет производится только по элементам массива availableTags внутри тегов h3. В скрипте формируется ссылка на закладку и после нажатия на кнопку поиска осуществляется переход к тегу с заданным id.

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

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

Если набрать в поле «вопрос» и щелкнуть по кнопке «Найти», то адрес страницы изменится с « http://сайт/2011/06/forma-poiska-po-saitu..html?text=вопрос », как это происходит при нажатии на ссылку . При загрузке страницы, скрипт проверяет наличие заданных параметров в URL и при их обнаружении формирует и отображает результаты поиска по сайту.

Но в целях увеличения скорости загрузки документа, скрипт, обрабатывающий запрос, как правило, помещают только на одну страницу сайта, на которую будет сделан переход, если её адрес прописать в атрибуте action: « http://сайт/search/ ?text=вопрос ».

Для работы скрипта могут понадобиться дополнительные параметры, которые указываются в . Это поле не отображается.?searchid=808327 &text=вопрос ».

Можно воспользоваться

• предложенным специальными сервисами Яндекса и Google ,
• встроенным в используемую CMS (при наличии), например, на Blogger на « https://site.ru /search?q=вопрос », где « site.ru » заменить на свой адрес блога,
• разработанным самостоятельно, например, на PHP.

Самый простой вариант - перенаправить запрос Google:>

Здравствуйте уважаемые читатели блога LifeExample, все мы пользуемся электронным поиском по странице в наших веб браузерах при помощи горячих клавиш CTRL+F либо F3. И кажется уже от таких привилегий нам никуда не деться, так как самостоятельно читать все содержимое страницы, зачастую бывает некогда. Беда в том, что далеко не все начинающие пользователи знают о таких скрытых возможностях любого браузера, но им можно помочь, прикрутив самодельный JavaScript поиск по странице, в тех проектах, где без него совсем никак.

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

Искать на странице нужную информацию будет удобнее, если для этого реализовать соответствующий интерфейс:

В поле нужно ввести слово для поиска и нажать кнопку «Искать», тут все интуитивно понятно. Давайте перейдем к реализации самого механизма поиска по странице и посмотрим, какие могут быть нюансы при его реализации.

Как искать слово на странице?
Нужно проверить корректность ввода данных, в нашем случае мы только обрежем пробельные символы по бокам фразы для поиска, а также просто проверим на саму форму на наличие в ней поискового запроса.
Так как данные статичны, и хранятся только в DOM’e страницы, то поиск по ней будет производиться именно по содержимому DOM (Document Object Model).
Важным является, показать пользователю все результаты, которые нашел наш JavaScript поиск. Т.е. подсветить фон под найденными частями содержимого страницы.
Так как этот мини модуль поиска по странице имеет смысл подключать только к большим страницам, которые имеют прокрутку, то при наличии найденной фразы, где-то вне зоны видимости неплохо будет прокрутить scroll до найденного элемента.
Повторное использование поиска, также является важным моментом в работе данного скрипта. Т.к. подсветка найденных частей является результатом изменения содержимого DOM объекта, то каждый последующий цикл поиска должен затирать результаты предыдущего и возвращать содержимое страницы к исходному виду, для дальнейших изменений новой итерации.
Ну, так вкратце вроде бы и все. Несмотря на объемность выделенных пунктов, реализация их не занимает много времени и места в коде, вот готовый скрипт для механизма JavaScript поиска по странице:

var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в ихсодном виде
function TrimStr(s) {
s = s.replace(/^s+/g, "");
return s.replace(/s+$/g, "");
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
var obj = window.document.getElementById(inputId);
var textToFind;

If (obj) {
textToFind = TrimStr(obj.value);//обрезаем пробелы
} else {
alert("Введенная фраза не найдена");
return;
}
if (textToFind == "") {
alert("Вы ничего не ввели");
return;
}

If(document.body.innerHTML.indexOf(textToFind)=="-1")
alert("Ничего не найдено, проверьте правильность ввода!");

If(copy_page.length>0)
document.body.innerHTML=copy_page;
else copy_page=document.body.innerHTML;

Document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),""+textToFind+""); //Заменяем найденный текст ссылками с якорем;
lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
window.location = "#"+textToFind;//перемещаем скрол к последнему найденному совпадению
}


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



Введите слово или фразу для поиска.

Вот так выглядит пример использования скрипта:

Что касается комментариев по коду, наверное, они тут излишни, так как присутствуют внутри скрипта. Единственное, с чем могут возникнуть трудности у новичков, это понимание смысла регулярных выражений при обрезании пробелов. Всем кому понадобится помощь, советую почитать соответствующую статью о регулярных выражениях.

Реализованный в данной статье, с помощью языка JavaScript , поиск по странице валиден во всех браузерах, включая Internet Explorer.

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

В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.

Элемент является контейнером для формы поиска, поле поиска создается при помощи элемента или , а кнопка отправки данных на сервер может создаваться с помощью элемента или .

Чем отличается от ? Оба этих поля создают однострочное текстовое поле для ввода текста, но type="search" добавлено в стандарт HTML5 и является семантической подсказкой для браузеров. Все браузеры, кроме Mozilla Firefox, добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type="text" .

Чем отличается от ? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.

Текст в поля формы можно добавлять двумя способами:
1)
Цвет отображаемого текста будет серого цвета. С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.

Input::-webkit-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; } input:-moz-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; } input:-ms-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; }

2)
Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color , например:

Input { color: white; }

Для отображения иконок не забудьте подключить .

Поле поиска появляется при нажатии на кнопку с иконкой.

* {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; height: 42px; } input { height: 42px; width: 0; padding: 0 42px 0 15px; border: none; border-bottom: 2px solid transparent; outline: none; background: transparent; transition: .4s cubic-bezier(0, 0.8, 0, 1); position: absolute; top: 0; right: 0; z-index: 2; } input:focus { width: 300px; z-index: 1; border-bottom: 2px solid #F9F0DA; } button { background: #683B4D; border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }

Обновленный ответ :

Сначала я не понял, что вы хотите вызвать веб-страницу, которой вы не контролируете, а затем использовать JavaScript в своем браузере для взаимодействия с ней.

Информация в первоначальном ответе ниже по-прежнему актуальна, но возникает вопрос: как заставить код работать в правильном контексте? И ответ: Есть как минимум два способа:

В любом приличном браузере в наши дни есть встроенные средства отладки. Посмотрите на меню для них, но во многих браузерах они доступны через клавишу F12 или Ctrl + Shift + I. В этих инструментах вы найдете "консоль", где вы можете ввести JavaScript и запустить его в контексте страницы, на которую вы смотрите.

Это отлично подходит для выполнения действий в интерактивном режиме, но это немного больно повторять его каждый раз. Вы также можете поместить код в локальный файл (например, /home/tjc/foo.js), а затем, когда вы перейдете на страницу, используйте консоль, чтобы добавить этот script на страницу (что приведет к ее выполнению в контексте страница), например:

Document.documentElement.appendChild(document.createElement("script")).src = "file:///home/tjc/foo.js";

Как только ваш script сделает то, что вы хотите, вы можете превратить его в bookmarklet . Это закладка браузера с использованием схемы javascript: , а не обычной http: и т.д. Подробнее см. Ссылку. Вам понадобится инструмент, который возьмет ваш код JavaScript и сделает для вас необходимую URL-кодировку, например Bookmarklet Crunchinator или аналогичный.

Оригинальный ответ :

Так что он найдет текст или получит элемент по id/class...

Это три очень разных вопроса:

Чтобы найти текст на странице, у вас есть несколько вариантов:

• Если вы хотите только найти текст, но не заботитесь о том, какой элемент содержит его, вы можете просто просмотреть innerHTML on document.body . innerHTML - строка; при доступе к нему браузер создает строку HTML для всех элементов DOM в элементе, на который вы его вызываете (и его потомках). Обратите внимание, что это не исходный контент с сервера; это создается "на лету" при доступе к элементу. Для многих случаев использования получение этой строки, а затем ее просмотр может быть полезным. Обратите внимание, что текст, который вы просматриваете, является разметкой, например, если вы искали слово "таблица", вы можете найти его в предложении ("Мы сели за стол") или в разметке (

  ...).

  Здесь приведен пример подсчета слова I"m на странице с помощью innerHTML: живая копия

  (function() { var pageText = document.body.innerHTML; display("Count of "I\"m" on the page: " + pageText.match(/I"m/g).length); function display(msg) { var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); } })();

  Если вам нужно выяснить, в каком именно элементе он находится, вам нужно будет написать рекурсивную функцию, проходящую через узлы страницы, и для Text , просматривает текст внутри. Вот базовый пример (функция - это функция walk): Живая копия | - см. примечание о примерах в конце.

  (function() { var matches = , index; walk(matches, document.body, ""); function walk(matches, node, path) { var child; switch (node.nodeType) { case 1: // Element for (child = node.firstChild; child; child = child.nextSibling) { walk(matches, child, path + "/" + node.tagName); } break; case 3: // Text if (node.nodeValue.indexOf("I"m") !== -1) { matches.push("Found it at " + path); } break; } } display("Matches found (" + matches.length + "):"); for (index = 0; index < matches.length; ++index) { display(matches); } function display(msg) { var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); } })();

  Чтобы найти элемент на странице id , используйте

  
  
  
  • Главная
  • Клавиатура
  • Скрипт поиск по странице на javascript. Поиск по странице с помощью jQuery. Выезжающее поле поиска
  Похожие публикации

  • 
    Застыл курсор на экране что делать
  • 
    Как удалить Хамачи (Hamachi) из ОС Windows Как удалить хамачи сетевых подключений
  • 
    Как устроен моноколесо. Как работает моноколесо. Технические различия между моделями
  • 
    Анонимный доступ по FTP Ftp анонимный доступ