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)


Featured templates

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.jsjQuery library (the form will work only with this version of library);

  • search.cssstylesheet file which is being used for the search results pages stylization;

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

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

  • results.phpPHP 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:

  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>

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

    <h3>Search result:</h3>
    <div id="search-results"></div>
  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
Live Chat
We help you to choose the right product.
Start chat