Ajax and Php Autocomplete Example ...

In this example we can learn how to use ajax and php autocomplete.

- Auto Complete:

Here you can create the html form controls we will use

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>

In the top of the page we add php script tag with an include for agent.php and a new $agent object.

/* my functions go here
and
here
*/
 
include_once("agent.php");
$agent->();

we will 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 is 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 will 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;
 
}

We now add two functions of javascript to make it work

In The first function "GetArtist" we are creating a temp variable to get the letters from the search box and then we are using the agent.

Javascript:

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

In the second function "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]);
}
}

 Original Source: