“Ajax search form” Documentation by “Stefan Carcu” v1.0

“Ajax search form”

Created: 09/07/2010
By: Stefan Carcu
Email: zmeutz@yahoo.com

Thank you for purchasing. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. PHP Files
  6. Integration

A) HTML Structure - top

This theme is a fixed layout with one column. All of the information within the main content area is nested within a div with an id of "content". The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

B) CSS Files and Structure - top

I'm using one CSS files in this theme. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file. The file is separated into sections using:

	/* search results */

	#results { width:525px; position:relative; margin:20px auto; padding:0; }

	/* search results top panel */
	
	#results_top { background:url(../img/content_corners.gif) no-repeat top; height:35px; width:508px; padding:15px 0 0 17px; }
	
	/* search results bottom panel */	
#results_bottom { background:url(../img/content_corners.gif) no-repeat bottom; width:507px; height:45px; padding:10px 0 0 18px; }

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

C) JavaScript - top

This theme imports two Javascript files.

  1. pagination.js
  2. search.js
  1. used to load search pages(if are more than 10 results as default) in the same page.
  2. used for instant search and display results in same page

D) PSD Files - top

I've included one psd:

  1. The main layout

E) PHP Files - top

Database connection, the file with connection details is db.inc.php Fill here with your information.

<?php
$username = "name";
$password = "password";
$hostname = "localhost";
$database = "database";


mysql_connect($hostname, $username, $password) or die(mysql_error());
mysql_select_db($database) or die(mysql_error(());
?>

The config file is config.inc.php from inc directory.

$table_name = "files"; //which table from database
$first_field = "title"; //which field from table (first)
$second_field = "description"; //which field from table (second)
$limitchar = 4; //minimum of characters for searched word
$records_number = 10; // number of records to show per page (not = 0)
$page_number = 1; // default start page (used for pagination)

E) Integration - top

You need to insert this lines in <head> </head> of your page

<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/pagination.js"></script>
<script> htmlData('search.php', ''); </script>
and this lines in <body> </body> : 
<input type= "text" id="terms" size= "40" onkeyup= "getScriptPage('show_results','terms','1')" value="" />

<div id="show_results"> </div>

search.php file must to be in same location with this file.

Once again, thank you so much for purchasing. As I said at the beginning, I'd be glad to help you if you have any questions relating to this. No guarantees, but I'll do my best to assist. If you have a more general question relating to the scripts on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Stefan Carcu

Go To Table of Contents