Creating the Front End of a Search Engine with AJAX

Alejandro Gervasio on Dev Articles have a new tutorial on creating the front end of a search engine with AJAX. Classic tutorial for an AJAX-Based search engine interface with the basic features. The tutorial is the first part of a three-part series that will show you how to create a search engine that fetches content […]

Alejandro Gervasio on Dev Articles have a new tutorial on creating the front end of a search engine with AJAX. Classic tutorial for an AJAX-Based search engine interface with the basic features. The tutorial is the first part of a three-part series that will show you how to create a search engine that fetches content from a database using PHP and AJAX.

Below I put at your disposal the full client-side of this search application. You can copy and paste it for testing purposes. 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. 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> 

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!
Continue for more….

ajaxmagzine

Front End, Search Engine