This lesson explains how to realize a simple search engine with Ajax and PHP that search an user name inside a db table "USER" and return results while you type into the input field.
Download tutorial
Step 1: main page
This page contains the search engine input field, and show the search results into the layer <div id="search-result">
Add a link to javascript function inside the <head> tag:
<script language="javascript" src="ajax_framework.js"></script>
...and copy this code into the <body> tag:
<h2>Ajax Search Engine</h2>
<form id="searchForm" name="searchForm" method="post" action="javascript:insertTask();">
<div class="searchInput">
<input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:searchNameq()"/>
<input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:searchNameq()"/>
</div>
</form>
<h3>Search Results</h3>
<div id="msg">Type something into the input field</div>
<div id="search-result"></div>
<form id="searchForm" name="searchForm" method="post" action="javascript:insertTask();">
<div class="searchInput">
<input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:searchNameq()"/>
<input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:searchNameq()"/>
</div>
</form>
<h3>Search Results</h3>
<div id="msg">Type something into the input field</div>
<div id="search-result"></div>
Step 2: Javascript Function
This is the ajax_framework.js code:
/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function searchNameq() {
searchq = encodeURI(document.getElementById('searchq').value);
document.getElementById('msg').style.display = "block";
document.getElementById('msg').innerHTML = "Searching for <strong>" + searchq+"";
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'in-search.php?name='+searchq+'&nocache = '+nocache);
http.onreadystatechange = searchNameqReply;
http.send(null);
}
function searchNameqReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('search-result').innerHTML = response;
}
}
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function searchNameq() {
searchq = encodeURI(document.getElementById('searchq').value);
document.getElementById('msg').style.display = "block";
document.getElementById('msg').innerHTML = "Searching for <strong>" + searchq+"";
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'in-search.php?name='+searchq+'&nocache = '+nocache);
http.onreadystatechange = searchNameqReply;
http.send(null);
}
function searchNameqReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('search-result').innerHTML = response;
}
}
Step 3: search into database
This code searching for the name in input into the database. Take a look here to see dbconnection.php code:
<?php
include('dbconnection.php');
$searchq = $_GET['searchq'];
$getName_sql = 'SELECT * FROM USER
WHERE name LIKE "%' . $searchq .'%"
$getName = mysql_query($getTask_sql);
$total = mysql_num_rows(getTask);
while ($row = mysql_fetch_array($getName)) {
echo $row.name . '<br/>';
}
?>
include('dbconnection.php');
$searchq = $_GET['searchq'];
$getName_sql = 'SELECT * FROM USER
WHERE name LIKE "%' . $searchq .'%"
$getName = mysql_query($getTask_sql);
$total = mysql_num_rows(getTask);
while ($row = mysql_fetch_array($getName)) {
echo $row.name . '<br/>';
}
?>
Save all files and test them in your localhost! Remember to create a db table USER with a field name.
I am 
This tutorial is excellent! By far the simplest php/mysql/ajax tutorial I could find. There are several errors in syntax and inconsistent variable names used in step 3, but nothing critical to the overall concept here. Thanks for posting!
This tutorial is excellent! By far the simplest php/mysql/ajax tutorial I could find.
Please, what script change needs to be made so that the database list will first appear on browser load before doing a search.
Currently the full list only stays up after your conduct the first search. Thanks.