// Declare the function that will run when the user
// lets up a key.
function showMonth(text) {
}

Step four: So now when a user types in the textbox, every time they let up a key Javascript will call the showMonth function and send the value of the textbox as variable text. Our next step is to check and set our AJAX http request variable:

The first part declares the global variable request so we can use it across multiple functions. The function setAJAX() checks to see if the users browser can set the http request variable. If it can it sets request, if it can't it returns false.

Now that our setAJAX function is up, let's actually run the check. We're going to move back to the showMonth(); function:

if(setAJAX()) {
}
// Alert the user that we cannot do AJAX in their
// browser.
else {
alert('Your browser does not support ajax');
}

So, if setAJAX doesn't return false, we have set the request variable and are ready to go. If it does return false, alert the user that their browser doesn't support AJAX.

Step five: Now we're going to actually do the AJAX part. We're going to populate the showMonth() function as follows:

function showMonth(text) {
// Check to see if the request variable can be
// set and set it.
if(setAJAX()) {
// Set our url to 'ajax.php?s=search_string'.
var url = "ajax.php?s=" + text;
// Set the onreadystatechange to find function
// getData when ready.
request.onreadystatechange = getData;
// Open and send the request.
request.open("GET", url, true);
request.send(null);
}
// Alert the user that we cannot do AJAX in their
// browser.
else {
alert('Your browser does not support ajax');
}
}

First we set the url to call the php file we will create in step eight. The url includes the text that we are trying to search that we typed in our textbox. Next, we tell the browser that when AJAX is ready, call the getData function to continue processing the AJAX request. We then open and send the AJAX request to the server.

First, we get the string that we sent in the url. Next we set up an array filled with the months. Then, we declare $months_match which is an empty array that we will fill with months that match our query.

Step nine: Now we can perform our check to display the months that match our search query:

if(strlen($str)) {
}

First, check to see if our search string has a length to it meaning someone typed something.

// Set a counter variable for outputting.
$count = 0;

Next, store the $count variable. The $count variable is going to be the number of entries we found in the $months array that match our search string.

// Run a loop through all of the $months array.
// We will check each spot for a match.
for($i = 0; $i < count($months); $i++) {
// If our search string is inside of $months[$i] and the
// position of our search string is at 0 then proceed.
if(stristr($months[$i], $str) && strpos($months[$i], $str) == 0) {
// Add the matched month to the next spot in
// $months_match array.
$months_match[] = $months[$i];
$count++;
}
}

The code explains this step pretty well. stristr checks if $str is inside of $months[$i]. The only problem with this is that it will return true if the string is found at the end of the string. Example:

To fix this we check to make sure $str is at the beginning of $months[$i] by using stripos.

Now we need to output:

// Now we need to loop through our $months_match
// array and output each spot.
for($i = 0; $i < count($months_match); $i++) {
echo $months_match[$i];
// If we just outputted the last spot in the
// array, then don't output a line break -
// it is not needed after the last spot.
if($i != (count($months_match) - 1)) {
echo "<br />";
}
}

The code is self-explanatory.

The last step is to check if we didn't have any results. The [inline]$count variable will still be 0 if we didn't:

Replies To: AJAX Techniques - Google style text box

great job! it was really helpful. I was trying to learn some basic AJAX from a book, and I spend an entire day trying to fix the code because it wasn't working. When I tried your example it worked perfectly. Keep up the good work!