## Demo

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

Enter a word to search for: Search For instance: lorem, ipsum, dolor

## Description

Files needed to work with the form:

- jquery-1.7.1.min.js – jQuery library (the form will work with this version of library only);
- 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 an iframe on the page search.php;
- results.php – PHP script, which actually performs the search.

To make the form work correctly, proper parameters should be set:

    <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>

In this form we should define such parameters as: action="search.php" and method="get", also set parameter for an input: name="s". If you want to change the name of the search form, which is id="search" by default, you should change it on the line 3 in the file search.js as well, you can find it in search folder.

## Settings

Note, search form is enabled, configured and works by default. These steps are required if you are trying to use this search form in another project/template without working search form.

To make the form work correctly, please, perform the following steps:

- copy search folder to the root directory with your *.html files;
- move file search.php from the search folder to the root directory (with *.html files);
- edit your form, using the directions above;
- 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-1.7.1.min.js"></script>
      <script src="search/search.js"></script>

- for the search results output add the following block to your content:

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

- 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.