Using Ajax Agent and PHP for Auto-Complete

Written By: Jay

- 15 Jun 2006 -
















Description: In this HOWTO I will explain how to use AjaxAgent and PHP to create an Ajax Auto-Complete box with a drill-down list of data. The UI is very simple. It consists of a TextBox to enter an Artists' Name, a selectbox to display the Albums and an unordered list to display the songs on an album.

  1. Auto Complete
  2. Posting Back
  3. On Your Own

Part 2: Posting Back

This next part is some very cool stuff. What we are going to do is select an item from the SelectBox which will return a list of Albums by the selected Artist. Since the list of Albums is being held in a server-side PHP Array getting the data back requires a round-trip to the server. In any normal case this is done in a Form Post which casues a page refresh but we are going to use Ajax to fire-off the server-side request for the data and avoid refreshing the page all together. The Get Albums task is made up of 2 parts: a server-side PHP function that searchs for the Albums and a client-side Ajax function that invokes the server-side function and hadles the response.The PHP function GetAlbumByArtist works like the GetArtist PHP function but instead of a regex we'll just use a string comparison usiug the Artist Name.

PHP:

function GetAlbumByArtist( $text )
{
include("dbconn.inc.php");
$strSQL = "SELECT albums.album_name FROM albums INNER JOIN artists ON 
albums.artist_id = artists.artist_id where artists.artist_name = '$text'";
$db = mysql_connect($dbHost, $dbUser,$dbPwd);
mysql_select_db($dbName,$db);
$result = mysql_query($strSQL,$db);
$num = mysql_num_rows($result);
$listArray = array();
$i=0;
while ($i<$num)
{
$listArray[$i] = mysql_result($result,$i,"album_name");
$i++;
}
asort( $listArray );
mysql_close($db);
return array_values($listArray);
}

In the FORM we created a SelectBox that has an OnClick("MatchSelected(this)") function defined. The MatchSelected function calls the GetAlbumByArtist and passes it the selected Artist Name. GetAlbumByArtist then invokes the agent.call method which has the Server-side PHP function defined, the client-side callback handler and the parameters we want to send to the PHP function. The agent.call has an optional first parameter of URL which can be used if your PHP code in in a seprate file.

For example:

Javascript:

agent.call('musicSearch.php','GetAlbumByArtist','GetAlbumByArtist_Callback',val);

If you use a seperate PHP file you'll need to be sure to add the following lines to the end of the file:


include_once("agent.php");
$agent->init();
?>

First we add the GetAlbumByArtist:

Javascript:

function GetAlbumByArtist(val) {
agent.call('','GetAlbumByArtist','GetAlbumByArtist_Callback',val);
}

The we add the the call back function but this time instead of placing our results in a Select Box we will be creating an Unordered list and placing the list inside a DIV.

Javascript:

function GetAlbumByArtist_Callback(obj) {
 
var htmlOutput = document.getElementById("htmlOutput");
var html = [];
for (var i in obj){
html[html.length] = '
  • \"
    • #\" 
onclick="GetTracksByAlbum(\''+obj[i]+'\')\">' + obj[i] + '';
}
document.getElementById("htmlOutput").innerHTML = '
      '
     
+html.join('')+'';
document.getElementById("htmlOutputTracks").innerHTML ='';
}

    You can see that in the link that we create has an OnClick() event defined. This will fire off another Ajax function that returns a list of Tracks for a selected Album.

    What you should have now is a search box that has an Ajax Auto-Complete function which return a list of Artist and a SelectBox that has a no-post back function which returns a list of Albums.

    << Previous

    Next >>