код для поиска по сайту

Как сделать поиск по сайту на HTML

На этом уроке мы научимся встраивать строку поиска в адаптивное меню навигации, используя при этом только HTML/CSS код.

Демонстрация примера.

HTML разметка

Внутри меню навигации

Вся эта конструкция до стилизации выглядит таким вот образом.

CSS код

Зададим светло-зелёный цвет фона для панели навигации.

nav <
background-color: #dcedc8;
>

Поместим все ссылки в строку с помощью обтекания слева, представим ссылки, как изначально строчные элементы – блочными.

nav a <
float: left;
display: block;
>

Меняем цвет фона под ссылками при наведении.

nav a:hover <
background-color: #8bc34a;
>

Стилизуем активный элемент для выделения пункта меню текущей страницы.

nav a.active <
background-color: #8bc34a;
color: #fff;
>

Располагаем контейнер для поиска на правой части панели навигации.

Стилизуем поле для поиска внутри панели навигации.

nav input[type=text] <
padding: 5px;
margin-top: 7px;
border: none;
>

Стилизуем кнопку Отправить внутри контейнера с поиском, располагая её правее по отношению к строке поиска (float:right).

Меняем цвет кнопки при наведении.

До ширины экрана 625 пикселей панель навигации выглядит хорошо.

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

Медиа-запросы

Первым делом отменим обтекание везде, где оно было (float:none), это позволит всем элементам занять вертикальное положение, на ширине экрана меньше, чем 625 пикселей.

Добавить иконку на кнопку Отправить

1) Добавить ссылку между тегами head:

2) Вставить иконку между тегами button:

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

Посмотреть код целиком можно на Codepen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 1 ):

Спасибо тебе, добрый человек! Ради отзыва решил даже зарегистрироваться на сайте. Это единственный поиск, который корректно подошел к моему сайту. За что огромное спасибо!

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Создание и настройка поиска

В ходе пяти шагов создания поиска вы настраиваете область поиска, внешний вид поисковой формы и результатов поиска. В результате вы получаете HTML-код для вставки на сайт.

Шаг 1. Область поиска

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

Техническое название поиска

Название, которое будет отображаться на странице Мои поиски. Его будете видеть только вы.

Название поиска для стандарта Opensearch

Вы можете задать название поиска для OpenSearch — под этим названием посетители смогут добавить ваш поиск в браузер в качестве поисковой системы.

Семейный фильтр

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

Чтобы заведомо исключить из области поиска страницы с матом и порнографией, настройте семейный фильтр. Настройки фильтра аналогичны соответствующим настройкам большого поиска.

Область поиска

Перечислите через пробел адреса сайтов или их подразделов.

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

В списке исключений можно указать точные адреса документов или маску адреса для исключения разделов сайта целиком. Например:

Исключение страницы somepage.php сайта example.com : http://example.com/somepage.php

Исключение всех страниц раздела /blog/ сайта сайта example.com : http://example.com/blog

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

Если ваша область поиска состоит только из поисковых тем, вы можете указать исключения, нажав кнопку Добавить сайты и исключения.

Шаг 2. Форма поиска

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

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

Код получившейся формы доступен на последнем шаге создания поиска.

Шаг 3. Результаты поиска

На третьем шаге вы настраиваете результаты поиска. Главное — решить, на какой именно странице должны показываться результаты поиска (блок Где показывать результаты).

Доступно два варианта:

На странице Яндекса, с вашим логотипом, заголовком и нижним колонтитулом (вариант Показать результаты на Яндексе ).

На странице вашего сайта (вариант Показывать результаты на моей странице ). Если вы выбрали этот вариант, укажите URL страницы, которая будет содержать код результатов поиска. Сам код будет доступен на последнем шаге создания поиска.

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

Шаг 4. Проверка поиска

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

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

Шаг 5. Код для вставки на сайт

На пятом шаге вы получаете код поисковой формы, а также код результатов поиска (если собираетесь отображать результаты на своем сайте).

Выбор кодировки и языка

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

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

Код поисковой формы

Выбрав язык поисковой формы, вы можете скопировать ее код и вставить в HTML-код страницы вашего сайта.

Код формы Яндекс.Поиска для сайта заключен в элемент

Код результатов поиска

Яндекс.Поиск для сайта предоставляет два кода результатов поиска:

Вставленный вами код результатов поиска встраивает весь HTML-код в структуру вашей страницы. Элементы результатов поиска будут оформлены согласно вашим общим CSS-стилям.

Если вы знакомы с настройкой CSS, вы сможете адаптировать оформление результатов под дизайн вашего сайта. Отметьте флажок Добавить CSS к коду результатов и 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.

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

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

Источник

Как сделать поиск по сайту с помощью PHP и MySQL

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

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

Что вам понадобится

Создаем базу данных

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

Создание таблицы

Наша таблица должна быть создана в следующем формате:

И среди данных персонала не может быть пустых значений ( null, empty ). Первая строка выделена желтым цветом, потому что столбец ID – наш основной ключ. Основной ключ в базе данных гарантирует, что каждая запись будет уникальной. К этой колонке также применен автоинкремент, а это значит, что каждой записи в нашей базе данных будет присваиваться уникальный номер автоматически.

Вносим представителей персонала в таблицу

Как только разберетесь с таблицей, начните заполнять ее данными. 6 записей вполне достаточно, чтобы закрепить в уме процедуру. Ниже предлагаю вам собственный пример:

Разработка формы

Проверка на соответствие критерию

До вывода запрашиваемых результатов нам нужно перепроверить: (1) была ли подтверждена форма, (2) содержит ли строка запроса значение go, (3) был ли поисковой запрос введен в нижнем или верхнем регистре? Если ни одна из проверок не дает положительного результата ( true ), то от нас не требуется выполнять какие-либо действия.

Для начала добавим небольшой блок кода PHP поиск по сайту после закрывающего тега :

Сначала мы открываем блок PHP-кода тегом ””.

Любой PHP-код внутри этой пары тегов будет исполняться сервером. Затем мы проверяем, была ли подтверждена форма:

Далее нам нужно проверить, имеется ли в строке запроса значение go :

Теперь нам нужно убедиться, что посетители могут вводить первую букву в строку запроса только в верхнем или только в нижнем регистре. Нам также нужно предусмотреть способ учета критериев поиска, введенных посетителем. Лучше всего проверять введенные посетителем данные с помощью регулярного выражения:

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

Результаты Connect, Select, Query и Return из таблицы базы данных

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

Далее при помощи представленного ниже кода, мы выбираем, какую базу данных использовать:

Убираем табуляцию

Результаты выводятся в виде неупорядоченного списка, но суть в том, что нам не нужна табуляция. Чтобы избавиться от нее, добавьте следующее CSS-правило в самое начало вашего файла в head :

Поиск по буквам

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

Добавьте следующую строку кода после закрывающего тега form :

Здесь мы изменили четыре фрагмента кода скрипта поиска по сайту:

Сохраните файл search_byletter.php и проверьте результат.

Поиск определенного сотрудника

Здесь мы изменили четыре фрагмента кода:

Сохраните файл search_byid.php и проверьте результат.

SQL-инъекция

Как уже было отмечено, регулярное выражение гарантирует, что в качестве первого символа посетитель может вводить лишь буквы в нижнем или верхнем регистре.

В завершение

В сегодняшней статье мы рассмотрели, как сделать поиск по сайту, а также:

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

Источник

Узнайте, как создать меню поиска для фильтрации ссылок с помощью 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.

Источник