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

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

Строка поиска

Убрать в поле поиска крестик «Очистить», удаляющий ранее набранный текст

Как работает форма поиска на сайте

Самый простой HTML-код

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

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

Для работы скрипта могут понадобиться дополнительные параметры, которые указываются в . Это поле не отображается. Теперь форма будет вызывать « http://shpargalkablog.ru/search/? search >».

Результат работы формы открыть в новой вкладке с помощью атрибута target

Где взять скрипт поиска по сайту

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

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

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

Текст на кнопке: «Поиск», «Искать», «Найти»

Из слов-побудителей «Найти» имеет совершённый вид и подразумевает, что результат поиска будет обязательно положительным.

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

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

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

И давайте рассмотрим все примеры подробно с пошаговыми действиями для установки каждого из них на сайт.

Первый вариант поиска по сайту с БД.

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

Читайте также:  Программа для переводчика текста

Ещё одним плюсом является подсветка найденных слов (букв) в результате поиска.

Недостатком является один факт — если прописывать в таблице БД адрес страницы из другой категории, то есть к примеру вот так: cat/page.html то при переходе по этому адресу из результатов поиска браузер выдаёт ошибку. А связано это с тем, что обработчик экранирует подобные символы, то есть превращает в html сущности.

Вы поймёте о чём речь, когда установите этот скрипт поиска и начнёте его опробовать в работе.

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

Скачайте ниже архив со скриптом поиска для сайта и залейте всё содержимое на хостинг.
Далее создайте БД с именем poisk_test и сравнение utf8_general_ci . После нажмите на созданную базу и в верхнем меню кликните кнопку SQL и в появившееся окно вставьте скопированный код из файла BD.sql и затем нажмите ОК .

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

Скачать скрипт поиска по сайту 1-ый вариант

Второй вариант поиска по сайту с БД.

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

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

Для установки этого скрипта поиска по сайту сделайте такие же действия, как и в предыдущем примере, только файл search.php трогать уже не нужно.

Скачать скрипт поиска по сайту 2-ой вариант

Третий вариант поиска по сайту на xml без БД.

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

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

Читайте также:  Create unique index sql

Скачать скрипт поиска по сайту 3-ий вариант

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

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

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

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

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

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

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

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

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

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

Читайте также:  Шипение в беспроводных наушниках

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

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

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

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

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

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

Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.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.

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

Ссылка на основную публикацию
Adblock detector