Categories

Новые шаблоны

JS Animated. Как активировать форму поиска

Lana Greene Ноябрь 24, 2014
Rating: 5.0/5. From 1 vote.
Please wait...

Здравствуйте, из этого туториала вы узнаете, как активировать форму поиска в вашем шаблоне JS Animated.

JS Animated. Как активировать форму поиска

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

Внимание! Форма поиска не работает, если сайт находится на локальном сервере. Такие формы работают только на хостингах с включенным PHP.

Для работы с формой необходимы эти файлы:

  • jquery.js – библиотека jQuery (форма будет активна только с этой версией библиотеки);

  • search.css – файл стилей, что используется при оформлении страницы результатов поиска;

  • search.php – страница, на которой отображаются результаты поиска;

  • search.js – скрипт, который отвечает за вывод результатов поиска на странице search.php;

  • results.php – PHP скрипт, с помощью которого осуществляется поиск.

Для активации формы поиска следуйте этой инструкции:

  1. Скопируйте папку search в корневую папку сайта (там расположены ваши файлы *.html):

    JS_Animated.How_to_activate_search_addon-1
  2. Переместите файл search.php из папки search в корневую папку (к файлам *.html).

  3. Отредактируйте вашу форму для определения следующих параметров: action=»search.php» и method=»get», а также, укажите параметр ввода: name=»s»:

    <form id="search" action="search.php" method="GET" accept-charset="utf-8">
        <input type="text" name="s" />
        <a onclick="document.getElementById('search').submit()">Search</a>
    </form>
      
    JS_Animated.How_to_activate_search_addon-2

    Если вы хотите изменить слово «поиск», по умолчанию заданное как id=»search», измените его на строке 3 в файле search.js, что находится в папке search.

  4. Скопируйте части хедера и футера с подключениями скриптов в раздел <head></head> на страницу search.php, обязательно добавьте подключение файла search.js. К примеру:

    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/fonts.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <script src="js/jquery.js"></script>
    <script src="search/search.js"></script>
    	
    JS_Animated.How_to_activate_search_addon-3
  5. Добавьте следующий блок к вашему содержимому для отображения результатов поиска:

    <h3>Search result:</h3>
    <div id="search-results"></div>
    	 
    JS_Animated.How_to_activate_search_addon-4
  6. Изменить оформление страницы результатов поиска можно в файле search.css.

Остальное оформление шаблона автоматически будет загружено из файла style.css посредством скрипта PHP.

Теперь форма поиска активна.

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

JS Animated. Как активировать форму поиска
Эта запись была размещена в JS Animated туториалы и помечена как activate, addon, javascript, search. Добавьте в закладки постоянную ссылку.

Submit a ticket

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