Categories

Featured templates

JS Animated. How to activate search addon

Lana Greene November 24, 2014
Rating: 5.0/5. From 1 vote.
Please wait...

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:

    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
This entry was posted in JS Animated tutorials and tagged activate, addon, javascript, search. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket