скрипт поиска по сайту javascript

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

Потому что почему бы и нет.

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

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

Общая идея

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

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

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

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

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

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

Осталось добавить сам текст в блок

Общая идея

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

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

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

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

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

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

Пишем скрипт

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

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

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

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

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

Источник

Узнайте, как создать меню поиска для фильтрации ссылок с помощью JavaScript.

Меню поиска/фильтра

Как искать ссылки в меню навигации:

Содержимое страницы

Начните вводить для определенной категории/ссылки в строке поиска, чтобы «отфильтровать» параметры поиска.

Какой-то непонятный текст Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, maiores. Voluptas quibusdam eveniet, corrupti numquam, consequatur illum corporis assumenda veniam ad adipisci aliquid rem nostrum repellat, nisi, iste totam nemo!

Создать меню поиска

Шаг 1) Добавить HTML:

Пример

Примечание: Мы используем href=»#» в этой демонстрации, поскольку у нас нет страницы для ссылки на неё. В реальной жизни это должен быть реальный URL для конкретной страницы.

Шаг 2) Добавить CSS:

Стиль окна поиска и меню навигации:

Пример

/* Стиль окна поиска */
#mySearch <
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
>

/* Стиль меню навигации */
#myMenu <
list-style-type: none;
padding: 0;
margin: 0;
>

/* Стиль навигационных ссылок */
#myMenu li a <
padding: 12px;
text-decoration: none;
color: black;
display: block
>

#myMenu li a:hover <
background-color: #eee;
>

Шаг 3) Добавить JavaScript:

Пример

Совет: Удалите toUpperCase() если вы хотите выполнить поиск с учетом регистра.

Совет: Также посетите Как фильтровать таблицы.

Совет: Также посетите Как фильтровать списки.

ПАЛИТРА ЦВЕТОВ

КАК СДЕЛАТЬ

Ваше предложение:

Спасибо за Вашу помощь!

Ваше сообщение было отправлено в W3Schools.

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения, тестирования и обучения. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политики конфиденциальности. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Источник

Организация поиска по веб-странице на JavaScript (без jQuery)

Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них — организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript.

(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)

Поиск готового решения

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

Если кому интересно, код брал тут.

Почему скрипт работал некорректно?

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

А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.

Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div». Как вы понимаете, внутри body есть множество других тегов, в том числе и div. И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.

Было до поиска: Просмореть полностью
Стало после поиска: Просмореть полностью

Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.

Итак пишем скрипт с нуля

Как все у меня выглядит.

Сейчас нас интересует форма с поиском. Обвел ее красной линией.

Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.

Первый — для ввода текста;
Второй — для для отмены поиска (снять выделение);
Третий — для поиска (выделить найденные результаты).

Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.js. Предпложим, что его вы уже создали и подключили.

Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Выглядеть будет так:

Давайте немного поясню что тут и зачем нужно.

Полю с текстом даем id=«text-to-find» (по этому id будем обращатсья к элементу из js).

Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,false); return false;»

— Тип: button
— При нажатии вызывается функция FindOnPage(‘text-to-find’,false); и передает id поля с текстом, false

Кнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,true); return false;»

— Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)
— При нажатии вызывается функция FindOnPage(‘text-to-find’,true); и передает id поля с текстом, true

Вы наверняка заметили еще 1 атрибут: true/false. Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false. Если жмем на поиск, то передаем true.

Окей, двигаемся дальше. Переходим к JavaScript

Будем считать, что вы уже создали и подключили js файл к DOM.

Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь — уверен есть много способов. Но сейчас будем использовать регулярные выражения.

Итак, следующее регулярное выражение будет искать только текст след. вида: «>… текст.

Источник

Как сделать живой поиск на сайте, с помощью JavaScript, AJAX и PHP

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

Живой поиск, означает что по мере того, как пользователь будет вводить данные в поле поиска, автоматически, предлагаемые варианты поиска будут обновляться.

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

Пример живого поиска на сайте google:

Необходимые инструменты и знания:

Добавление домена в OpenServer

И так, для начала, нам необходимо создать папку для нашего сайта.

Для этого открываем папку ‘domains’, которая расположена внутри папки сервера OpenServer. И создаем там папку с названием ‘live-search.local’.

После этого, открываем настройки Open Server.

Переходим во вкладку ‘Домены’, указываем папку домена и добавляем домен.

Создание и настройка базы данных

Для того чтобы перейти к создании базы данных, запускаем сервер и открываем СУБД PHPMyAdmin.

Нажимаем на ссылку ‘New’.

Указываем название базы ‘live_search’ и выбираем кодировку ‘utf8mb4_unicode_ci’.

Далее, создаем таблицу ‘users’, со столбцами ‘id’ и ‘name’ и наполняем ее данными.

Для этого, в PhpMyAdmin, переходим на вкладке SQL и запускам следующий запрос:

И видим, что данные добавились.

Создание необходимых файлов

Создайте следующие файлы в папке ‘live-search.local’.

style.css – Файл для стилей

Создание живого поиска

Теперь переходим непосредственно к созданию функционала живого поиска.

Открываем файл с именем ‘index.php’ и вставляем в него следующий код:

Теперь, настроим подключение к базе данных. Для открываем файл ‘db.php’ и вставляем в него следующий код:

Далее, открываем файл ‘handler.php’ и вставляем в него следующий код:

Открываем файл с именем ‘script.js’ и вставляем в него следующий код:

Открываем файл стилей ‘style.css’, и вставляем в него следующий код:

Готово! Функционал ‘живой поиск’ готов к тестированию.

Открываем сайт в браузере, по адресу live-search.local/

Теперь в текстовое поле, вводим какое-то имя из примера. Или можно ввести только некоторую комбинацию букв из имени. Например, поищем ‘Андрея’. Вводим в поиск ‘ан’.

Как видим, в результатах поиска, по запросу ‘ан’ у нас отображаются, имена, которые содержат эту комбинацию букв.

Теперь разберемся как работает наш живой поиск. Значит при вводе запроса, значение поля поиска, считывается скриптом из файла ‘script.js’.

В данном файле, используя технологию ‘ajax’, это значение передается на сервере. Обработчиком на стороне сервера является файл ‘handler.php’.

В файле ‘handler.php’, по введенному запросу, производится поиск в таблице ‘users’ из базы данных.

Здесь же, формируется список с результатами поискового запроса и возвращается обратно в файле ‘script.js’, в функцию ‘success’.

Результат с сервера, находится внутри параметра ‘response’.

Используя метод html(), мы добавляем этот результат в блоке div с потом, используя метод show(), мы отображаем этот div, на странице.

И еще, если мы теперь кликнем на результат поиска, то, срабатывает функция fill() из файла ‘script.js’, которая берет результат по которому кликнули и добавляет его в поле поиска. В тоже время, она скрывает результаты поиска.

Вот и все. Поле для поиска в режиме реального времени готова.

Видео: 15 Способов Поиска в Google, о Которых не Знают 96 % Людей

Похожие статьи:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Автор статьи: Мунтян Сергей

Источник

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

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

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

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

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

Как искать слово на странице?

Ну, так вкратце вроде бы и все. Несмотря на объемность выделенных пунктов, реализация их не занимает много времени и места в коде, вот готовый скрипт для механизма JavaScript поиска по странице :

script type = «text/javascript» >
var lastResFind=»»; // последний удачный результат
var copy_page=»»; // копия страницы в ихсодном виде
function TrimStr(s) <
s = s.replace( /^\s+/g, »);
return s.replace( /\s+$/g, »);
>
function FindOnPage(inputId) 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»),» a name = «+textToFind+» style = ‘background:red’ > «+textToFind+» / a > «); //Заменяем найденный текст ссылками с якорем;
lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
window.location = ‘#’+textToFind;//перемещаем скрол к последнему найденному совпадению
>
/ script >
body >
h2 > JavaScript поиск по странице / h2 >
input type = «text» id = «text-to-find» value = «» >
input type = «button» onclick = «javascript: FindOnPage(‘text-to-find’); return false;» value = «Искать» / >
br / > i > Введите слово или фразу для поиска. / i >
hr / >

table border = ‘2’ cellpadding = ’20’ >
tr > th > Товар / th > th > Вес / th > th > Стоимость / th > / tr >
tr > td > Монитор 19 дюймов / td > td > 1 кг / td > td > 1900 руб. / td > / tr >
tr > td > монитор 18 дюймов / td > td > 2 кг / td > td > 1800 руб. / td > / tr >
tr > td > Монитор 20 дюймов / td > td > 2 кг / td > td > 1900 руб. / td > / tr >
/ table >
/ body >

Попробуйте, протестировать поисковыми запросами «19», «2 кг» и другими. Также советую проверить авто скролинг, для этого добавляйте текст до тех пор пока справа не появится полоса прокрутки.

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

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

Читайте также похожие статьи:

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Источник