If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to activate search addon

Hello, this tutorial shows how to activate Search Addon in your JS Animated template.

JS Animated. How to activate search addon

In some cases you need to activate a search addon on your website. It allow users to find the required information on the website quickly.

Attention! Search feature will not work locally. It works only on a hosting-server with PHP enabled.

Files needed to work with the form:

  • jquery.js – jQuery library (the form will work only with this version of library);

  • search.css – stylesheet file which is being used for the search results pages stylization;

  • search.php – page where the search results will appear;

  • search.js – script which is responsible for the search results output in iframe on the page search.php;

  • results.php – PHP script which actually performs the search.

In order to activate search addon, you should do the following steps:

  1. Copy search folder to the root directory with your *.html files:

    JS_Animated.How_to_activate_search_addon-1

  2. Move file search.php from the search folder to the root directory (with *.html files).

  3. Edit your form to define such parameters as: action=”search.php” and method=”get”, also, set parameter for an input: 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

    If you want to change the name of the search form which is id=”search” by default, you should change it on line 3 in the file search.js, you can find it in search folder.

  4. Copy partly header and footer with all the connected scripts in the section <head></head> to the page search.php, but necessarily add connection of the file search.js. For example:

    <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. To show the search results, add the following block to your content:

    <h3>Search result:</h3>
    <div id="search-results"></div>
    	 

    JS_Animated.How_to_activate_search_addon-4

  6. Change style of the search results using search.css.

All the rest main styles of your template will be automatically pulled from the file style.css by the PHP script.

Now the search addon is activated.

Feel free to check the detailed video tutorial below:

JS Animated. How to activate search addon