• 1
• 2
• 3
• 4
• 5

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