Hendraktp’s Weblog

Start by creating a new PHP page and placing the agent.php (Ajax Agent) 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
5. htmlOutputTracks = An empty DIV when we will be creating a list of Tracks

HTML:

<form>
<input name="artistName" id="artistName" size="20" type="text"
onkeyup="GetArtist();return false;" autocomplete="off">
<br>
<select id="matches" style="VISIBILITY: hidden"
onclick="MatchSelected(this);" ></select>

<hr>
<div id="htmlOutput"></div>
<hr>
<div id="htmlOutputTracks"></div>
</form>

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.

PHP:

/* my functions go here
and
here
*/

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

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

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 Artis 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.

PHP:

function GetArtist( $text ){
include("dbconn.inc.php");
$strSQL = "SELECT * FROM artists WHERE artist_name LIKE '$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)
{
$artist_name = mysql_result($result,$i,"artist_name");
$listArray[$i] = $artist_name;
$i++;

}

asort( $listArray );
mysql_close($db);

return $listArray;

}

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 iun 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.

Javascript:

var matchList = document.getElementById("matches");

function GetArtist() {
var artistName = document.getElementById('artistName').value;
agent.call('','GetArtist','GetArtist_Callback',artistName);
}

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.

Javascript:

function GetArtist_Callback(obj) {
matchList.style.visibility = "visible";
matchList.options.length = 0; //reset the states dropdown
matchList.size = obj.length;

for (var i = 0; i < obj.length; i++)
{
matchList.options[matchList.options.length] =new Option(obj[i]);
}
}

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

Javascript:

function MatchSelected(matches) {
var artistName = document.getElementById("artistName");
artistName.value = matches.options[matches.selectedIndex].text;
GetAlbumByArtist(artistName.value);
}

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.