HOME  |  AJAX  |  SOLUTIONS  |  TECHNOLOGIES  |  E-COMMERCE  |  ABOUT US
The Front-end

The front end of the AJAX Suggest Tutorial is pretty straight forward.  There is one form with a textbox for entering the search query, a button for submitting the search, and a DIV that we will display our suggested searches in.
<form id="frmSearch" action="http://www.DynamicAJAX.com/search.php">
<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria"
onkeyup="searchSuggest();" autocomplete="off" />

<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" />
The only thing that should look a little strange to you is the autocomplete="off" command.  This just stop the default behavior of most modern web browsers from listing a set of terms that you have recently entered in the textbox.  This would end up interfering with our auto suggest dropdown we will create with the DIV. 

The onkeyup event will start our AJAX request to check the server for suggestions.  In a real implementation, we may want to throttle the keyup command so that we don't send request to the server as quickly as the user can type.  However we check the readystate of the XmlHttpRequest object before we send the request anyway, thus stopping us from sending requests faster than we can retrieve them.

As you can see, for the tutorial I have the form submitting to the Search page of DynamicAJAX.   This just passes along whatever is in the search textbox in a "GET" querystring.

We will also create a couple of styles in the header and include our JavaScript file that we will create later on in the tutorial.

After our textbox and button, we will add our suggestion DIV.
	<div id="search_suggest">
</div>
</form>
This DIV will have some styling applied to it in order for it to appear right.  Depending on where your search box is located in your website, you may have to play around with the properties of this DIV inorder for it to appear in the proper location.

Now we will just close out our DIV, and the rest of the HTML is just for aesthetics.

Let's take a look at the styles we will use for the tutorial
<style type="text/css" media="screen">
body {
font: 11px arial;
}
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
</style>
Basically we set a page-wide font to be 11px arial (I like arial), define 2 classes for the suggested items we will dynamically create, and one CSS property for our suggestion DIV.  The two classes should be pretty straight forward, and if they're not, it's definitly time to read up on CSS.  The search_suggest property sets our DIV's position to absolute.  This keeps it from interfering with any elements on the page as we grow and expand it.  Another value we could have set this to would be relative, but I find that I get mixed results in IE when I attempt doing things that way.

You will have to decided what works best on your site depending on where your searchbox is located.

The one last thing that we will add to our page header is the script import tag that we will create next.
<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
On to the fun AJAXey stuff.