JAVASCRIPT

Creating the Front End of a Search Engine with AJAX

Welcome to the first part of a three-part series that will show you how to create a search engine that fetches content from a database. We will use PHP and AJAX to create this engine. This article will focus on creating the search engine's front end.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 20

November 15, 2006

TABLE OF CONTENTS:

print this article

SEARCH DEVARTICLES

TOOLS YOU CAN USE

Creating the Front End of a Search Engine with AJAX - Putting the pieces together
(Page 5 of 5 )

As I said before, below I put at your disposal the full client-side of this search application. You can copy and paste it for testing purposes. Here it is:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://

www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>AJAX-BASED SEARCH ENGINE</title>
<script language="javascript">
// send http requests
function sendHttpRequest(url,callbackFunc,respXml){
    
var xmlobj=null;
 
try{
       
xmlobj=new XMLHttpRequest();
}
   
catch(e){
      
try{
           
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
        }
       
catch(e){
           
alert('AJAX is not supported by your 

browser!');
           
return false;
        }
}
xmlobj.onreadystatechange=function(){
       
if(xmlobj.readyState==4){
            if(xmlobj.status==200){
               
respXml?eval(callbackFunc+'

(xmlobj.responseXML)'):eval(callbackFunc+'(xmlobj.responseText)');
           
}
        }
}
// open socket connection
xmlobj.open('GET',url,true);
// send http header
     xmlobj.setRequestHeader('Content-Type','text/html;charset=

UTF-8');
// send http request
 
xmlobj.send(null);
}
// display search results
function displayResults(results){
    var rescontainer=document.getElementById('resultcontainer');
    if(!rescontainer){return};
 
rescontainer.innerHTML='';
   
rescontainer.innerHTML=results;
}
window.onload=function(){
  
if(document.getElementById&&document.

getElementsByTagName&&document.createElement){
         var searchbutton=document.getElementsByTagName('form')[0].

elements[1];
             if(searchbutton){
              
searchbutton.onclick=function(){
  
sendHttpRequest('search.php?searchterm='+document.

getElementsByTagName('form')[0].elements[0].value,'displayResults');
            }
        }   
    }
}
</script>
<style type="text/css">
body{
            margin:0;
            padding:0;
            background:#fff;
}
h1{
            font:bold 28px Arial, Helvetica, sans-serif;
            color:#000;
            text-align:center;
}
h2{
            font:bold 12px Arial, Helvetica, sans-serif;
            color:#c00;
}
p{
            font:normal 12px Arial, Helvetica, sans-serif;
            color:#000;
}
#searchcontainer{
            width:600px;
            padding:5px 0 5px 0;
            margin-left:auto;
            margin-right:auto;
            background:#9c9;
            border:1px solid #000;
            text-align:center;
}
#resultcontainer{
            width:580px;
            height:500px;
            padding:10px;
            margin-left:auto;
            margin-right:auto;
            overflow:auto;
            background:#eee;
            border-left:1px solid #000;
            border-right:1px solid #000;
            border-bottom:1px solid #000;
}
#resultcontainer ul,li{
            display:block;
            list-style:none;
}
#resultcontainer a,#resultcontainer a:visited{
            font:bold 12px Arial, Helvetica, sans-serif;
            text-decoration:underline;
            color:#039;       
}
#resultcontainer a:hover,#resultcontainer 

a:active,#resultcontainer a:focus{
            color: #c00;
}
.searchbox{
            width:200px;
            font:normal 12px Arial, Helvetica, sans-serif;
            color:#000;
}
.searchbutton{
            width:80px;
            font:bold 12px Arial, Helvetica, sans-serif;
            color:#000;       
}
</style>
</head>
<body>
<h1>AJAX-BASED SEARCH ENGINE</h1>
<div id="searchcontainer">
<form method="get">
<input type="text" name="searchterm" title="Enter your search
term here" class="searchbox" />
<input type="button" name="search" value="Search"
class="searchbutton" title="Search Now!" />
</form>
</div>
<div id="resultcontainer">
</div>
</body>
</html>

After showing you the complete source code that comprises the client module of this AJAX-driven search engine, I hope you’ll have enough time to tweak it and introduce your own improvements and changes.

Wrapping up

We’ve come to the end of this article. In this first tutorial of the series, I showed you in a friendly fashion how to create the front-end of an AJAX-based search engine. Logically, there are still more topics to cover, such the development of the application’s server module, which will be created with PHP 5.

Therefore, I’m afraid you’ll have to read the next article to learn how this will be done. I'll see you then!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.