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

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

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

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

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

Общая идея

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

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

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

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

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

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

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

Общая идея

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

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

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

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

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

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

Пишем скрипт

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

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

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

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

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

Организация поиска по веб-странице на 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.

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

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

Поиск на сайте своими руками

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

У читателя может возникнуть вопрос: зачем писать все с нуля, если все уже давно написано? Да, у крупных поисковиков есть API, есть такие клевые проекты, как Sphinx и Apache Solr. Но у каждого из этих решений есть свои преимущества и недостатки. Пользуясь услугами поисковиков, типа Google и Яндекс, Вы получите множество плюшек, таких как мощный морфологический анализ, исправление опечаток и ошибок в запросе, распознавание неверной раскладки клавиатуры, однако без ложки дегтя тут не обойдется. Во первых, такой поиск не интегрируется в структуру сайта — он внешний, и Вы не сможете указать ему, какие данные наиболее важны, а какие не очень. Во вторых, содержимое сайта индексируется только с определенным интервалом, который зависит от выбранного поисковика, так что если на сайте что-нибудь обновится, придется дожидаться момента, когда эти изменения попадут в индекс и станут доступными в поиске. У Sphinx и Apache Solr дела с интеграцией и индексированием гораздо лучше, но не каждый хостинг позволит из запустить.

Ничто не мешает написать поисковый механизм самостоятельно. Предполагается, что сайт работает на PHP в связке с каким-нибудь сервером баз данных, например MySQL. Давайте сначала определимся, что требуется от поиска на сайте?

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

Принцип работы

Подготовка

Задача поставлена, теперь можно перейти к делу. Я использую Linux в качестве рабочей ОС, однако постараюсь не использовать ее экзотических возможностей, чтобы любители Windows смогли «собрать» поисковый движок по аналогии. Все, что Вам нужно — это знание основ PHP и умение обращаться с MySQL. Поехали!

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

Теперь вооружаемся своим любимым текстовым редактором и подготавливаем каркас:

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

Морфологический анализатор

Русский язык — довольно сложная штука, которая радует своим разнообразием и шокирует иностранцев конструкциями, типа «да нет, наверное». Научить машину понимать его, да и любой другой язык, — довольно непростая задача. Наиболее успешны в этом плане поисковые компании, типа Google и Яндекс, которые постоянно улучшают свои алгоритмы и держат их в секрете. Придется нам сделать что-то свое, попроще. К счастью, колесо изобретать не придется — все уже сделано за нас. Встречайте, phpMorphy — морфологический анализатор, поддерживающий русский, английский и немецкий языки. Более подробную информацию можно получить тут, однако нас интересуют только две его возможности: лемматизация, то есть получение базовой формы слова, и получение грамматической информации о слове (род, число, падеж, часть речи и т.д.).

Нужна библиотека и словарь для нее. Все это добро можно найти тут. Библиотека находится в одноименной папке «phpmorphy», словари расположены в «phpmorphy-dictionaries». Скачиваем последние версии в корневую папку проекта и распаковываем:

Отлично! Библиотека готова к использованию. Пришло время написать «оболочку», которая абстрагирует работу с phpMorphy. Для этого создадим еще один файл morphyus.php в корневой директории:

Пока реализовано только два метода. get_words разбивает текст на массив слов, фильтруя при этом HTML-теги и сущности типа » «. Метод lemmatize возвращает массив лемм слова, либо false, если таковых не нашлось.

Механизм ранжирования на уровне морфологии

Давайте остановимся на такой единице языка, как предложение. Наиболее важной частью предложения является основа в виде подлежащего и/или сказуемого. Чаще всего подлежащее выражается существительным, а сказуемое глаголом. Второстепенные члены в основном употребляются для уточнения смысла основы. В разных предложениях одни и те же части речи порой имеют совершенно разное значение, и наиболее точно оценить это значение в контексте текста сегодня может только человек. Однако программно оценить значение какого-либо слова все-таки можно, хоть и не так точно. При этом алгоритм ранжирования должен опираться на так называемый профиль текста, который определяется его автором. Профиль представляет из себя ассоциативный массив, ключами которого являются части речи, а значениями соответственно ранг (или вес) каждой из них. Пример профиля я покажу в заключении, а пока попробуем перевести эти размышления на язык PHP, добавив еще один метод к классу morphyus:

Индексирование содержимого сайта

Как уже говорилось выше, индексирование заметно ускоряет выполнение поискового запроса, так как поисковому движку не нужно обрабатывать контент каждый раз заново — поиск выполняется по индексу. Но что же все-таки происходит при индексировании? Если по порядку, то:

В результате получается объект следующего формата:

Пишем инициализатор и первый метод ядра поискового движка:

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

Хранение индексированных данных

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

Нерешенным остался лишь вопрос формата индексированного содержимого, ведь make_index возвращает объект, и так просто в базу данных или файл его не запишешь. Можно использовать JSON и хранить его в полях типа LONGTEXT, можно BSON или CBOR, используя тип данных LONGBLOB. Два последних формата позволяют представлять данные в более компактном виде, чем первый.

Как говорится, «хозяин — барин», так-что решать, где и как все будет храниться, Вам.

Benchmark

Давайте проверим, что у нас получилось. Я взял текст своей любимой статьи «Темная материя интернета», а именно содержимое узла #content html_format и сохранил его в отдельный файл.

На моей машине с конфигурацией:
CPU: Intel Core i7-4510U @ 2.00GHz, 4M Cache
RAM: 2×4096 Mb
OS: Ubuntu 14.04.1 LTS, x64
PHP: 5.5.9-1ubuntu4.5

Индексирование заняло около секунды:

Думаю, вполне неплохой результат.

Реализация поиска

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

Все! Поисковый движок готов к использованию. Но есть одно но… На самом деле это не джин-волшебник, и просто закинув его на свой сайт Вы не получите ничего. Его нужно интегрировать, причем этот процесс во многом зависит от архитектуры Вашего сайта. Рассмотрим этот процесс на примере небольшого интернет магазина.

Реализация поиска на примере интернет-магазина

Допустим, информация о продаваемой продукции хранится в таблице production:

А описание в таблице description:

Поле production.keywords будет содержать индекс ключевых слов продукта, description.index будет содержать индексированное описание. И все это будут храниться в формате JSON.

Вот пример функции добавления нового продукта:

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

Данный сценарий принимает поисковый запрос в виде GET-параметра query и выполняет поиск. В результате выводятся найденные продукты магазина.

Заключение

В статье был описан один из вариантов реализации поиска для сайта. Это самая первая его версия, поэтому буду только рад узнать Ваши замечания, мнения и пожелания. Присоединяйтесь к моему проекту на Github: https://github.com/axilirator/firewind. В планах добавить туда еще кучу всяких возможностей, вроде кэширования поисковых запросов, подсказок при вводе поискового запроса и алгоритма побуквенного сравнения, который поможет бороться с опечатками.

Всем спасибо за внимание, ну и с днем информационной безопасности!

Поиск на сайте: настройка и грамотная оптимизация

В статье рассказывается:

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

Для чего нужна форма поиска на сайте

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

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

Важность поиска текста на сайте наглядно демонстрирует следующий пример. Попробуйте с минимальными затратами времени найти нужную вам информацию на таком огромном портале с миллионами объявлений, как Avito.ru. Это возможно только с помощью формы поиска.

Чаще всего из результатов выдачи систем Google или «Яндекс» посетитель попадает не на главную страницу сайта, а на ту, которая содержит контент, соответствующий запросу. Но поисковые системы не всегда способны точно определить это: чем больше на сайте страниц, продуктов, статей и т. п., тем сильнее усложняется процесс нахождения релевантной информации. Поэтому не надейтесь на «Яндекс» и Google, постарайтесь установить на ресурсе сервис внутреннего поиска, чтобы облегчить жизнь своей аудитории.

Настройка поиска по сайту – это ещё и коммерчески выгодно. Так, оптимизировав данную функцию на своём веб-ресурсе, компания UPS Battery Center получила:

рост величины среднего чека на 140 %;

повышение прибыли на 125 %;

увеличение показателей конверсии на 116 %.

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

Согласно исследованию eConsultancy за 2014 год, статистику поиска по сайту используют для улучшения ресурса и совершенствования продаж всего 7 % фирм.

У 42 % предприятий вообще нет поискового плагина на площадке.

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

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

Какие задачи должен решать хорошо настроенный поиск на сайте

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

Хорошо заметен, удобно расположен на главной странице.

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

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

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

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

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

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

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

Как функционирует поиск слова на сайте?

Содержимое сайта проиндексировано.

Посетитель набирает запрос в строке поиска.

Служебные части речи отсекаются.

Строка превращается в массив слов, стоящих в базовой форме.

По базе проиндексированного контента ищутся эти слова.

Полученные результаты ранжируются, сортируются и выводятся на страницу.

По каким запросам пользователь осуществляет поиск информации на сайте

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

Поиск по названию товара

Некоторые клиенты аккуратно набирают в поиске полное и правильное наименование товара, поскольку чётко знают, что им нужно. Название они берут из разных источников:

копируют его с других сайтов (например, если ищут самую выгодную цену);

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

Узнать запросы можно с помощью «Вордстата», «Яндекс.Метрики» и Google Analytics. Эти сервисы дают точную картину происходящего, не исключая ошибочного варианта их написания, альтернативных наименований.

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

Поиск по имени категории

Те, кто ещё не определился с конкретной моделью, будут выбирать по тематическим категориям и набирать общие, абстрактные запросы: «амортизатор», «газонокосилка» и т. п. Поэтому поиск на сайте должен охватывать все возможные синонимы, которые только могут прийти в голову пользователю: от самых очевидных до сленговых и профессиональных. Например, один посетитель ищет копир, другой – ксерокс (хотя фактически это одно и то же).

Поиск по описанию проблемы

Ещё один сегмент целевой аудитории – с неконкретными поисковыми запросами. Это люди, ищущие решение своей проблемы. К примеру, «стучит колесо» – именно такую формулировку они будут адресовать поисковому сервису. Если по вашему сайту делается много подобных симптоматических запросов, позаботьтесь об особой настройке поиска.

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

Информационный запрос

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

Запросы-характеристики

Иногда потенциальный клиент применяет поиск на сайте для подбора товара, обладающего какой-либо характеристикой, например, «чёрный айфон». Чаще всего это параметры следующих типов:

Субъективные запросы

Для некоторых потребителей важны свойства товара, не представляющие интереса для владельцев сайта: «дорогая сумка», «дешёвый сыр», «качественный планшет». Чтобы поиск по сайту сработал, требуются более тонкие настройки. Например, слово «качественный» в запросе должно обеспечивать выдачу целевых продуктов, у которых много отзывов или высокий рейтинг; слова, связанные с ценой, – давать выборку, отсортированную по стоимости от дорогих позиций к дешёвым или наоборот.

Аббревиатуры и символы

С помощью внутреннего поиска нередко ищут сокращённые наименования, общепринятые аббревиатуры, номера моделей, цены. Например, «вино белое 1200 р.». Предусмотрите это при настройке поиска по сайту, чтобы не растерять лиды. Поручить задачу лучше программисту, работающему в связке с сео-специалистом.

Преимущества настройки поиска на сайте через Google и «Яндекс»

Когда на веб-ресурсе накапливается масса контента, позаботьтесь о создании удобного поиска слов по сайту. Если CMS ресурса содержит соответствующий функционал, задействуйте его. Для статичных сайтов, состоящих из отдельных HTML-страничек, подключите скрипт, прочёсывающий HTML-код и формирующий список совпадений. Есть и третий вариант, наиболее оптимальный: воспользоваться поисковым плагином от «Яндекса» или «Гугла».

У плагинов, предоставляемых поисковыми системами, ряд весомых преимуществ:

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

Учитывается всё морфологическое разнообразие языка.

Существуют подсказки для пользователя.

Опечатки, ошибки тут же автоматически исправляются.

Ведётся статистика поиска.

Настройка поиска на сайте через «Яндекс».

Широко известный поисковик «Яндекс» предлагает удобный и мощный инструмент внутреннего поиска, причём бесплатно.

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

У плагина внутреннего поиска на сайте от «Яндекса» есть настраиваемые опции, задать которые легко и просто. Внешний вид сервиса можно модифицировать, оформив строку выдачи в цветовой гамме портала, если стандартный дизайн вас не устраивает. CSS-стилями и элементами поиска тоже реально управлять. Поиск по сайту не ограничивается только текстами: с его помощью вы найдете картинки и видеоролики (они будут отображаться в виде превью, которые, кстати, настраиваются по собственному вкусу).

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

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

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

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

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

Настройка поиска на сайте через Google.

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

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

Плагин Google для поиска по сайту предоставляет следующие возможности:

Персонализация. Оформление поискового модуля по усмотрению клиента: настройка цветовой гаммы и прочих параметров (даже логотип «Гугла» можно заменить своим).

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

Ранжирование результатов. Способ формирования выборки задаётся вручную. Можно, например, придать новым публикациям более высокий приоритет в выдаче.

Уточнение и создание ярлыков. Аналогично уточнению результатов в «Яндексе», но в соответствии с категорией контента, в пределах которой посетитель ищет нужную информацию.

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

Ручное управление индексацией. Обновили сайт – можете заставить поискового робота прочесать весь ресурс и учесть обновления.

Синонимы. База запросов постоянно пополняется синонимами и вариантами написания (например, Nissan и «Ниссан»), аббревиатурами и сокращениями (с расшифровками).

Управление подсказками: их тоже можно установить вручную.

Охват поиском сразу нескольких сайтов.

Интеграция с остальными продуктами Google, прежде всего Analytics (показывает всю статистику по пользовательскому поведению и запросам) и AdWords (позволяет заработать, сделав сайт частью партнёрской сети для транслирования контекстной рекламы).

Укажите URL сайта, где будет установлен плагин поиска.

Выберите язык по умолчанию.

Определите название поиска.

Выберите платную либо бесплатную версию.

Примите соглашение об условиях.

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

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

Чей бы готовый сервис поиска по сайту вы ни выбрали (от «Яндекса» или от «Гугла»), имейте в виду, что он прочёсывает не собственно сайт, а только страницы, проиндексированные роботом. Перед установкой поиска убедитесь, что все целевые рубрики открыты для индексации и попали в индекс поисковика.

Пошаговая настройка «Яндекс.Поиска» на сайте

Рассмотрим подробно метод установки поискового плагина «Яндекса» на сайт. Код, сгенерированный браузером, вставляется через CMS как в шаблон страницы, так и в подходящий контентный блок.

Зайти на https://site.yandex.ru и кликнуть по кнопке «Установить поиск».

Заполнить обязательные поля и добавить ресурс в область поиска (сначала проверьте, есть ли ваш сайт в «Яндекс.Вебмастере»). Обязательно укажите свой e-mail.

Вторая стадия установки:

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

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

Протестировать качество работы поискового сервиса на веб-ресурсе.

Скопировать фрагмент кода и вставить его в нужное место вашего сайта. Учтите, что поисковая форма и вывод результатов – это два отдельных фрагмента! Почему так сделано? Для того, чтобы строку поиска можно было разместить, например, в сайдбаре или «шапке» сайта, а результаты вынести на специальную страницу. Пользователь вводит запрос и попадает на страницу со списком результатов.

Кстати, сам код представлен в двух форматах на выбор: как Html&CSS и как iframe. Последний является более простым, его удобнее интегрировать на сайты со сложной модульной сеткой, но менять оформление можно лишь в узких пределах. А вот если выбрать Html&CSS, то поиск станет частью кода страницы, и допускается стилизовать его через CSS как угодно.

Зайти в CMS сайта, чтобы установить код. Для размещения поисковой формы на главной странице найдите подраздел «Колонка на главной» в «Документах сайта» и заведите новый текстовый блок.

Нажать кнопку «Источник» и, попадя в HTML-код страницы, вставить туда код формы и вывода результатов, после чего сохранить изменения.

Обновите страницу, где ожидаете увидеть форму поиска по сайту: она должна там появиться.

4 платформы для настройки поиска на сайте

Эта опенсорсная платформа для поиска пользуется огромной популярностью. Среди тех, кто её применяет, есть такие гиганты, как IBM, eBay, Adobe, Instagram, Disney.

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

Для подключения установите Solr на своём сервере, а после этого интегрируйте на сайт через API. Это может сделать квалифицированный программист.

Sphinx

Этот опенсорсный движок для поиска по сайту, созданный компанией Sphinx Technologies Inc, является одним из наиболее быстрых.

Имеет формат отдельного приложения, устанавливаемого на сервере и подключаемого посредством API. Для подключения Sphinx тоже потребуется помощь программиста.

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

Detectum

Стоимость: для каждого проекта индивидуальна.

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

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

Searchanise

Расценки: 9-54 доллара США ежемесячно (чем больше товаров, тем выше цена поискового сервиса).

Разработан на базе технологий Sphinx специально для онлайн-магазинов. Нагружать собственный сервер не придётся, так как Searchanise работает в облаке. На сайт клиента устанавливается в виде плагина.

Есть поддержка таких популярных CMS, как:

Как самостоятельно настроить поиск страниц на сайте

Многие владельцы сайтов останавливают выбор на встраиваемых поисковых сервисах от «Яндекса» или «Гугла». Это действительно удобно: вставка пары строк кода не требует глубоких знаний в области программирования и вёрстки.

Однако у плагинов есть серьёзный минус: индексация страницы занимает длительное время. Так, если вы сегодня обновили товарную базу, пополнив её несколькими новыми позициями, в результатах поиска они обнаружатся, в лучшем случае, на второй-третий день, а то и через неделю (если это «Яндекс-поиск»). Удаление продукта тоже не сразу отражается на поисковой выдаче.

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

Процедура поиска по сайту начинается с того, что в поле вводится ключевое слово или фраза.

Сверстаем для начала саму форму:

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

Созданный блок div, имеющий класс search, стилизуем посредством CSS (или вообще удаляем и помещаем форму поиска по сайту в другой блок, если это необходимо).

Для запуска работы скрипта прописываем action=»search.php».

Не забываем указать метод поиска: method=»get» (ключевое слово в этом случае берётся из URL’а).

У поля поиска обозначим тип: type=»search».

Зададим имя текстовому полю, куда пользователь вводит запрос: name=»word» («word» затем обрабатывается как переменная).

Создадим подсказку для пользователя с помощью атрибута placeholder=»Поиск», который виден, пока в поле не ввели запрос.

Теперь самое интересное: собственно, обработка слова и нахождение совпадений с ним в базе.

Создаём файл search.php, в который передаются данные из формы, и прописываем следующий код:

На этом всё, наш простейший поиск по статьям на сайте готов. Его можно усложнить и дополнить, приспособив для поиска по описаниям и названиям продуктов в каталоге.

10 подсказок по оптимизации поиска на сайте

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

Аналитика

Позаботьтесь о ней сразу же после запуска сайта. Некоторые CMS включают в себя личный кабинет и раздел статистики по ресурсу. Если ваша админка не относится к таковым, просто воспользуйтесь бесплатным счётчиком от Google Analytics и настройте в нём мониторинг поиска по сайту.

Аналитика даёт массу ценных сведений:

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

О привлекательности товаров. Самые востребованные позиции каталога – те, чей CTR в результатах выдачи выше всех.

Из каких статей пользователи черпают ответы на вопросы, из каких – нет (у последних высокий процент отказа по трафику из внутреннего поиска).

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

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

Кроме того, станет ясно, какой контент добавить на сайт. Люди часто вбивают в поиск запросы, но не находят подходящих материалов на вашей площадке? Значит, материалы нужно создать! Написать статью, новость и т. п. И уже не сомневаться в её будущей востребованности.

Заметная поисковая строка

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

Поместите поисковую строку, максимально заметную и узнаваемую, на видное место, не прячьте её.

Дайте понять пользователям, что это – поиск в пределах именно вашего веб-ресурса, а не всей мировой паутины. Плагины от «Яндекса» или Гугла вызывают путаницу, потому что содержат логотип поисковой системы. Людям непонятно, ищут они по сайту или сейчас их унесёт в открытый Интернет.

Подсказки

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

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

Результаты поиска: ничего не найдено

Такого на сайте не должно быть ни в коем случае. Пустая поисковая выдача недопустима! Даже если запрос был бредовым, нужны хоть какие-то результаты: по схожим запросам, по текущим рекламным акциям и популярным товарам, наконец, исходя из истории поиска пользователя.

Внутренний поиск товаров на сайте является элементом воронки продаж, а пустая страница станет зияющим провалом, куда упадут ваши лиды.

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

Больше информации на странице результатов

Не стесняйтесь делать результаты поиска развёрнутыми. Помимо обычного набора (заголовок плюс краткое описание) можно вывести в поисковую выдачу отзывы на товар, его рейтинг, фото, свойства, цену и скидки (если есть), а главное – кнопку «Купить» для тех, кому лень переходить в продуктовую карточку.

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

Использования фильтров и сортировка результатов

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

Сортировки – от дешёвых к дорогим, от новых к старым, самые популярные или обсуждаемые – тоже существенно упрощают поиск на сайте.

Чем комфортнее пользователю на вашем веб-ресурсе, тем вероятнее покупка. Позаботьтесь о своих потенциальных клиентах.

Рекомендации и похожие товары

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

Распознавание опечаток и ошибок

Не каждый может похвастаться идеальной грамотностью, поэтому сервис должен прийти на помощь пользователю и распознать запрос, даже если он написан с ошибками и опечатками. Однако поиск в случайно выбранных интернет-магазинах в 50 % случаев на такое не способен: любая опечатка в запросе даёт пустую страницу выдачи.

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

Изменение раскладки результатов

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

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

Не стирайте поисковый запрос из строки после ввода

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

Еще несколько полезных фишек для настройки поиска на сайте

Большое количество отказов.

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

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

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

Название товара не соответствует запросу.

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

К примеру, пользователь набирает фразу «железная кастрюля», но среди подходящих товаров нет ни одного, где присутствовало бы слово «железный». Он ничего не найдёт.

Для решения проблемы добавляют в тег title и описание продукта слово «железная» (то есть, оптимизируют товары под запросы стороннего поиска).

Но в большинстве случаев поисковый сервис просто сбоит. Если на вашем сайте установлен самописный поиск, придётся обращаться к программисту, чтобы он отладил скрипт. Для готовых модулей от Google и «Яндекс» придётся самостоятельно разбираться в тонкостях настроек.

Наличие общих запросов.

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

Пример: «Dell», «Huawei», «Sony».

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

Полезным окажется создание отдельных страниц-агрегаторов товаров по конкретным брендам. Посетителям станет проще ориентироваться. Кроме того, это помогает в ранжировании сайтов в глобальном поиске по запросам с именем бренда.

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

Поиск существующего раздела через поиск.

Когда на сайте имеется определённый раздел, но посетители не заходят туда через меню, навигация откровенно плоха.

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

Изменив навигацию, оцените результаты: что поменялось в статистике поиска слов по сайту? Если из него практически исчезли названия разделов, это значит, что люди начали использовать меню, и вы всё сделали правильно.

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 ленту блога.

Как сделать поиск по сайту с помощью 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-инъекция

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

В завершение

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

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

Валентин Сейидов автор-переводчик статьи « How to Create a Search Feature with PHP and MySQL »

Как найти слово на сайте в интернете: пошаговое руководство

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

Способ 1: С помощью горячих клавиш

То, что я вам сейчас расскажу, должно сильно облегчить вам жизнь. Есть такое понятие, как «Горячие клавиши» – это специальные кнопки на клавиатуре, при нажатии на которые вы включаете определенные функции программы.

Неважно какой у вас браузер (Google Chrome, Internet Explorer, Mozilla Firefox, Opera) или программа, работающая с текстом (блокнот, Word, Excel, FineReader) – всегда используются одни и те же кнопки.

Если у вас на компьютере установлена Mac OS система, то вместо Ctrl используем кнопку Command (или cmd ).

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

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

Но убрав окончание браузер нашел сразу три слова.

Чтобы закрыть поиск, можно нажать на крестик или использовать кнопку:

Способ 2: Через меню

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

Google Chrome

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

Яндекс.Браузер

Жмем по трем линия сверху. Выбираем пункт «Дополнительно» – «Найти».

Opera

Кликаем по красной букве «О» и находим пункт «Найти».

Mozilla Firefox

Открыв основное меню браузера находим кнопку «Найти на странице».

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

7 рекомендаций для функции поиска на вашем сайте

Аудио перевод статьи

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

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

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

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

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

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

1. Когда вам нужна кнопка поиска?

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

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

В случаях, когда посетители сайта не могут найти то, что им нужно, функция поиска поможет им почувствовать, что все под контролем.

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

2. Используйте знакомую всем иконку лупы

При проектировании поисковой строки оставьте хорошо знакомую всем иконку лупы.

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

3. Строка поиска должна быть заметной

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

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

Чаще всего, посетители интуитивно ищут строку поиска в верхних углах страницы, особенно на популярных сайтах, таких как YouTube, который располагает ее именно там.

4. Обеспечьте наличие кнопки “Отправить”

Механизм поиска ответов на вашем сайте похож на поиск информации в Google. По этой причине для посетителей логично, что при отправке запроса им нужно нажать клавишу “Enter”.

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

Многие зрители будут нажимать «Enter» вместо кнопки «Отправить». При разработке сайта нужно проверить, будет ли «Enter» выдавать правильные результаты.

5. Разместите поисковую строку на каждой странице

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

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

6. Поле поиска должно быть достаточно длинным

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

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

Задайте ширину, используя ems (прим. единица масштабирования текста), или установите размер одной буквы равный длине буквы “m” в данном шрифте. Это позволит вам правильно оценить свое пространство.

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

7. Рассмотрите возможность применения автоподсказок

Автоподсказки помогают вашим клиентам найти то, что они ищут. Они задают направление их поисковым запросам.

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

8. Советы

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

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

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

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

Автоподсказки должны быть выделены жирным шрифтом. Это поможет привлечь внимание пользователей.

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

Заключение

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

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

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

Обзор сервисов поиска для сайта

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

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

Исследовательская компания eConsultancy обнаружила, что установленный поиск по сайту улучшает пользовательский опыт и финансовые показатели компаний на 7%. При этом 30% посетителей пользуются внутренним поиском и доход от этих клиентов больше, чем от тех, кто просматривает главную и первые страницы каталога. И это неудивительно — просто представьте, что ищете товары на Wildberries или Ozon вручную без внутреннего поиска. Перспектива часами листать вкладки не радует.

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

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

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

Существует три способа сделать внутренний поиск на сайте:

Сервисы поиска по сайту

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

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

«Google Поиск»

Google Поиск стоит от 100$ до 2000$ в год. При этом вы можете тестировать бесплатную версию с ограничениями.

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

Подключить «Google Поиск» на сайт легко, для этого нужно вставить код скрипта на страницу. Эти настройки можно изменять в личном кабинете, а код больше не придется обновлять.

«Яндекс Поиск» для сайта

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

Подключить «Яндекс Поиск» на сайт довольно просто. Для этого вставьте код на сайт. А в личном кабинете настройте подсказки, синонимы, и просматривайте статистику.

Перечислим другие востребованные сервисы, если Google или Яндекс вам по какой-то причине не подошел.

Бесплатный сервис Solr популярен у Adobe, Disney, eBay, IBM. У него открытый исходный код, при этом сервис очень надежный и справляется с огромными нагрузками. Установить Solr самостоятельно не получится, потребуется помощь программиста.

Sphinx

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

Detectum

Detectum — сервис для интернет-магазинов, цена рассчитывается по запросу. Удобен тем, что включает подсказки, автозаполнение и исправление опечаток, фильтрует результаты выдачи. Detectum анализирует историю покупок и показывает посетителям именно те товары, которые могут их заинтересовать.

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

Поиск на HTML сайте

Устанавливаем поиск на сайте с помощью скрипта phprusearch.

Скачайте скрипт из раздела скриптов.

Распакуйте архив и закачайте папку phprusearch в корень сервера (обычно папка public_html).

Установите следующие права доступа:

Зайдите по адресу http://ваш сайт/phprusearch/sadmin/

Если всё сделали правильно, появится окошко:

В админке поменяйте пароль на свой в пункте «Смена пароля», а затем заходите в пункт меню «Настройка».

Установите название сайта и остальные настройки, если необходимо.

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

Жмите пункт меню «Индексация». Должен вылезти попап с результатами.

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

Пробуйте что-нибудь поискать.

Дизайн страницы с результатами задаётся файлом index.php в папке phprusearch. Можете открыть этот фаил и до значка вставить нижнюю часть.

Статистику запросов, можете смотреть в админке. Для этого там есть пункт меню «Запросы».

Устанавливаем поиск на сайте от Яндекса.

Поиск от Яндекса конечно классный, но вот статистику запросов с помощью него Вы посмотреть не сможете.

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

Естественно параметры http://ruseller.com измените на свой сайт. Иначе Ваша форма будет искать по моему сайту.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 29 Декабря 2007
Просмотров: 175662
Правила перепечатки

5 последних уроков рубрики «Для сайта»

Эффекты блочного раскрытия

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

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

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

45+ бесплатных материалов для веб дизайнеров за август 2016

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