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

Разобьем нашу работу на несколько этапов:

  1. Создаем js скрипт, реагирующий на набор текста в поле поиска.
  2. Создаем в файле function.php экшен, отвечающий за вывод результата.
  3. Выводим результаты в созданном html контейнере.
  4. Красиво оформляем результат выдачи.

Подключаем необходимые скрипты

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

Не забудьте учесть один важный момент — необходимо подключить последнюю версию библиотеки jQuery. Если она не подключена, используйте код в файле function.php темы:

Создаем функцию для обработки AJAX запросов

Если вы не знаете, куда вставлять данный код, смело разместите его в файл function.php вашей темы.

 

Создаем контейнер для вывода результатов поиска

Итак, нам необходимо показать результаты поиска. Для этого, разместите сразу же после input формы поиска:

 

Оформляем результаты выдачи

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

 

11 коментариев к записи

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

      • У меня выходит вот так: Failed to load resource: the server responded with /wp-admin/admin-ajax.php a status of 404 (Not Found)

      • Заработало! Пришлось прописать полный путь. Но, хотелось бы, чтоб как у вас ))

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

  • Я разобрался, большое спасибо за великолепное решение. Надо было почему-то убрать слеш (/) перед wp-admin/admin-ajax.php. Изменил немного вывод результатов (миниатюры постов не выводились), работаю над CSS.

  • А можно как-то загрузчик прикрепить? Этот, который крутится, например, в ожидании результата. Пожалуйста.

    • Можно. Для этого на странице необходимо разместить gif картинку с крутящимся прелоадером и css стилями. Например, так: img src=»путь к картинке» style=»display: none; position: fixed;» class=»preloader»
      Затем, в момент набора текста, в js скрипте после if(searchTerm.length > 2){ прописать ее появление. Что-то вроде $(‘.preloader’).fadeIn(); Ну и в итоге, после успешного выполнения скрипта скроем его: $(‘.preloader’).fadeOut();

    • Если Вам так и непонятно? :

      И вот загрузчик. В моем случае — иконка от FA:

Добавить комментарий