In this HOWTO I will explain how to use AjaxAgent and PHP to create an Ajax Auto-Compltete box with a drill-down list of data. Although the state of this Ajax Framework is questionable it is so far the simplest and easisest framework I have found.

The UI is very simple. It consists of a TextBox to enter an Artists’ Name, a select box to display the Albums and an unordered list to display the songs on an album. This will be furtherer extended with the ability to drill-down into an Album and get a list of songs.

Introduction: The Three Tasks

The first thing we need to do is add "Auto-Complete" to the TextBox. The "Auto-Complete" functionality works like this: A user starts typing in the search text box. The Search box has an "OnKeyUp" JavaScript Event defined. This JS Event triggers a JS function that sends the letters in the text box to a PHP function. The PHP function process the query and returns the results to the JS function as an Array. And finally the JS function binds the results to a SelectBox.

The second part of this task is to get the Albums based on the Artist Name. This part requires invoking an Ajax call that will send the selected Artist Name to the Album Look-up function to get the Albums and then display the results in a div.

The third part is to take the Album Name and fire off another Ajax function that gets all of the songs for the selected Album.

All three tasks (Get Artist, Get Albums, Get Songs) are almost identical in functionality with the difference being the input and output values. Each Ajax task has 2 main functions, the "Get" Function and the "Get Callback" Function. Depending on the output method of the results whether it is an HTML control or a link will determine whether you need an optional 3rd function that triggers other functionality. For instance when the list of Artists has been populated and one is selected the MatchSelected function is fired off. The MatchSelected then fires off the GetAlbumsByArtist JS function which returns a list of Albums. When an Album is selected from the list the GetTracksByAlbum function fires off the GetSongsByAlbum function which returns a list of songs from the selected Album.

Part 1: Auto Complete

Start by creating a new PHP page and placing the agent.php file in the same directory.
Open your new PHP page in an editor and start hacking away.

First create the HTML Form controls we will be using:
1) txtArtists = TextBox to type the ArtistName in.
2) matches = A SelectBox with an onclick event which will be used to send the ArtistName to the AlbumSearch method we will be creating.
3) txtArtistID = Hidden to hold the selected ArtistName (js cannot see the select box because it is hidden?)
4) htmlOutput = An empty DIV when we will be creating a list of Albums
4) htmlOutputTracks = An empty DIV when we will be creating a list of Tracks

Now at the top of the page add a new PHP script tag with an include for agent.php and a new $agent object. Any other PHP code that we must be placed before (above) this code.

Next we'll add the first function that search for Artists by name.

The GetArtist function works by taking a string parameter and uses it to search for Artists who's name begin with it using a Regular Expression. The list of Artists are stored in an Array array and we will use a foreach loop to search the Artist Name. If we find a match we add it to a second $results array and them move on to the next item in the array. Once we have reached the end of the $Artist Array we re-sort the $results Array. Lastly we only want to return a list of Artist Name so we'll use the array_values($results) function.

So far we have a form and a PHP function now we need to wire up some ajax to make this work.

*There are some visibility issues with JS and the HTML Controls so the <SCRIPT> block needs to be below the form elements.*

We need to create 2 JS functions to get this to work.
The first function GetArtist is what we will call from our OnKey Event iu the search text box and the second function is the Callback method we will send our search results to.

In the GetArtist function we are creating a temp variable to get the letters from the search box and then we are using the agent.call function do define the PHP function, the JS Callback and the parameters we are sending.

In the GetArtist_Callback we are setting the Select Box to visible and then giving it a display size which is equal to the number of items returned from the search. Then we loop over the items and add them to the select box.

And lastly we have the MatchSelected JS function which is called by the OnClick event of the SelectBox:

We will cover this function in the next section but for now just know that it invokes the Ajax function that gets a list of Albums by the selected Artist.

If all has gone well you should be able to start typing in a name and some results should show as a select box. Once you have this part working we will move on to the second function of GetAlbumsByArtist.

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 causes 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 searches for the Albums and a client-side Ajax function that invokes the server-side function and handles the response.
The PHP function GetAlbumByArtist works like the GetArtist PHP function but instead of a regex we'll just use a string comparison using the Artist Name.

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 separate file.

For example:

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

First we add the GetAlbumByArtist:

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.

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.

Part 3: On Your Own

Your last task is to use the OnClick() event in the Albums list to return a list of Tracks on an Album.

Remember this is a 2 part process.

Part 1: Define a a PHP function that search for an Array of Tracks using the Album Name.
Part 2: On the client side:
A: define a JS function that invokes the agent.call function and passes it the Album Name.
B: Define an Callback function that handles the response from the server-side PHP function and then binds it to an html control.

It's very easy to do so you should give it a shot before peaking at the source code.

Part 4: Conclusion

--------------------------------------------------------------------------------------
Full Source Code:

dbconn.inc.php

index.php

SQL MUSICDB