html tutorials | css tutorials | php tutorials | Nodstrum Blog » Javascript

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

Jamie — Wed, 19 Sep 2007 11:50:40 +0000

AutoCompleter Tutorial

As always, links to a demo and ZIP at the bottom, Enjoy!

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!

And so we begin:
JavaScript

<script type="text/javascript">script>

JS Explaniation

Ok, the above code it the guts to the script, this allows us to hook into the rpc.php file which carries out all the processing.

The Lookup function takes the word from the input box and POSTS it to the rpc.php page using the jQuery Ajax POST call.

IF the inputString is ’0′ (Zero), it hides the suggestion box, naturally you would not want this showing if there is nothing in the text box. to search for.

ELSE we take the ‘inputString’ and post it to the rpc.php page, the jQuery $.post() function is used as follows…

$.post(url, [data], [callback])

The ‘callback’ part allows to hook in a function, this is where the real magic if thats what you can call it happens.

IF the ‘data’ returned length is more than zero (ie: there is actually something to show), show the suggestionBox and replace the HTML inside with the returned data.

SIMPLE!

Now for the PHP Backend (RPC.php)

As always my PHP Backend page is called rpc.php (Remote Procedure Call) not that it actually does that, but hey-ho.

// PHP5 Implementation - uses MySQLi.
$db = new mysqli('localhost', 'root' ,'', 'autoComplete');
if(!$db) {
    // Show error if we cannot connect.
    echo 'ERROR: Could not connect to the database.';
} else {
    // Is there a posted query string?
    if(isset($_POST['queryString'])) {
        $queryString = $_POST['queryString'];
        // Is the string length greater than 0?
        if(strlen($queryString) &gt;0) {
        // Run the query: We use LIKE '$queryString%'
        // The percentage sign is a wild-card, in my example of countries it works like this...
        // $queryString = 'Uni';
        // Returned data = 'United States, United Kindom';
 
        $query = $db-&gt;query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
        if($query) {
            // While there are results loop through them - fetching an Object (i like PHP5 btw!).
            while ($result = $query -&gt;fetch_object()) {
                // Format the results, im using
	<li> for the list, you can change it.
                // The onClick function fills the textbox with the result.
                echo '
	'.$result->value.'');">'.$result-&gt;value.'
';
            }
        } else {
            echo 'ERROR: There was a problem with the query.';
        }
    } else {
        // Dont do anything.
    } // There is a queryString.
} else {
    echo 'There should be no direct access to this script!';
}
}
 
?&gt;

PHP Explaination

Im not going to go into much detail here because there are loads of comments in the code above.

Basically, it takes the ‘QueryString’ and does a query with a wildcard at the en.

This means that in this case of the code each key-press generates a new query, this is MySQL intensive if its always being done, but short of making it exceedingly complex it is fine for small scale applications.

The PHP code is the part you have to change to work in your system, and all the it is updating the ‘$query’ to your database, you should be able to see where you put the table column name in etc…

CSS Styling – im using CSS3, YEA BABY! much easier although limits the functionality to Firefox and Safari.

script>
<script src="js/src/scriptaculous.js" type="text/javascript">script>

Next we need to create a few functions to make our life easier.
The reason for this is it makes them reuseable and therfore we dont need to make our code look messy, im a little anal about code being correctly formatted and using the same chunks of code over and over again when they could simply be made into functions.

function startLoading() {
  // First we want to show the loading window then hide the content are we are loading into.
  Element.show('mainAreaLoading');
  Element.hide('mainAreaInternal');
}
 
function finishLoading() {
  // First we want to show the content are, then toggle the loading window so it fades away.
  Element.show('mainAreaInternel');
  // This happens 1 second after the mainAreaInternal is shown incase the content is still loading.
  setTimeout("Effect.toggle('mainAreaLoading');", 1000);
}
 
function loadContent(id) {
  // We make use of the Ajax.Updater function to load the external data from our file.
  // Start the loading window first by calling the function we made previously.
  startLoading();
 
  // Request the content and update the 'div' area (i'll explain this in more detail later).
  new Ajax.Updater('mainAreaInternal', 'rpc.php', {method: 'post', postBody:'content='+ id +''});
 
  // Now finish the loading.
  finishLoading();
}

Next we have to make our ‘RPC file’ (probably the wrong phrase to use, but it works for me).

Whatever you ‘echo’ out to from this script will be what appears on the screen, html tags et-all, although i have found that outputting certain types of Javascript, like entire functions does not seem to work.

  // We are posting our request, like the 'method="post"' in a form, so we need to catch it.
  $content = $_POST['content'];
 
  // The content to show is determined by the $content integer we send through from the javascript.
  switch($content) {
    case 1:
      echo 'This is the content for the FIRST case statement!';
      break;
    case 2:
      echo 'Congratulations, you have loaded the second bit of content!';
      break;
 
    default:
      // This default case catches any $content value that does not have a case. I'm giving a nice error message so you can work out what went wrong.
      echo 'Whoops, there was a problem in the switch.You passed: '. $content .' to the switch statement in rpc.php.';
  } // end Content Switch.
?&gt;

Here is the CSS Stylesheet to make all this possible

  .mainAreaInternal {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
 
    overflow: auto;
    z-index: 0;
  }
 
  .mainAreaLoading {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 500px;
    height: 300px;
 
    z-index: 1;
  }

Ok, now that the backend is all there, we need to do the difficult part (probably the easy bit for everyone else!), making the HTML page.

Load Content 1
    Load Content 2
 

 
 
 
 
This is the content that will be visible at the very beginning.
 

 
 

        Loading Please Wait...

Now for the little explaination
Basically the loading ‘div’ area is always there, it is just hidden from view, so when you call the ‘startLoading()’ function it shows it, then hides it after the allotted time.
Adding new ‘cases’ to the rpc.php file will allow more content to be loaded

Example and Code
Content Loading Example
RPC.php Source Code

Get the Full Code in a ZIP Here.

– If you are using this script, i would greatly appreciate it if you referenced http://nodstrum.com in your sourcecode –

Calendar System – Easily using PHP & Script.aculo.us

Jamie — Mon, 29 Jan 2007 21:37:48 +0000

THIS HAS BEEN UPDATED, PLEASE SEE THIS POST: http://nodstrum.com/2007/06/27/mysql-calendar/

Hi,

Quite a few people seemed to like my previous tutorial Image Manipulation using PHP, and looking around many of the tutorial sites there are hardly any Calendar systems. Perfect, here is a simple, in calendar terms one…
You’ll see what i mean.

At the bottom of this tutorial there is a link to the ZIP and the test site.

There are 3 main parts, the Javascript, the HTML and the PHP script.
For this tutorial i am making it so you can change the date with the form and it will update the calendar without having to reload the entire page, AJAX style.

First we need the Script.aculo.us library, if you download my zip test file it is already included, but if not go to: http://script.aculo.us

This is the basic HTML page with the style sheet.
The stylesheet is important because it contains the .calendarFloat part.
The important part is the < div id=”calendarInternal” > this is where the calendar will be loaded into, its in its own < div > because we need to clear the float to enclose the calendar and make the box enclose the entire calendar.

Next is the Javascript that has to be added to the Head of the document.
This does the highlighting and loading of the calendar using the script.aculo.us

<script type="text/javascript">
	function highlightCalendarCell(element) {
		$(element).style.border = '1px solid #999999';
	}
 
	function resetCalendarCell(element, color) {
		$(element).style.border = '1px solid #000000';
	}
 
	function startCalendar(month, year) {
new Ajax.Updater('calendarInternal', 'rpc.php', {method: 'post', postBody:'action=startCalendar&month='+month+'&year='+year+''});
	}
script>

The 2nd to last part is the RPC page, its not truly an RPC (remote procedure call) page, i just call it that because it is distinct.
I use a switch statement because my function is normally enclosed in a huge page, so here goes.

 
	$action = $_POST['action'];
	switch($action) {
 
	case 'startCalendar':
		$month = $_POST['month'];
		$year = $_POST['year'];
 
		if(($month == 0) || ($year == 0)) {
			$thisDate = mktime(0, 0, 0, date("m"), date("d"), date("Y"));
		} else {
			$thisDate = mktime(0, 0, 0, $month, 1, $year);
		}
 
		echo '
 
 




 
';
 
		// Display the week days.
		echo '
Mon
Tue
Wed
Thur
Fri
Sat
 
Sun
 
';
 
		// Show the calendar.
		for($i=0; $i<date("t",>
		{
			$thisDay = ($i + 1);
			if(($month == 0) || ($year == 0)) {
				$finalDate = mktime(0, 0, 0, date("m"), $thisDay, date("Y"));
				$today = mktime(0, 0, 0, date("m"), date("d"), date("Y"));
				$fdf = mktime(0, 0, 0, date("m"), 1, date("Y"));
				$month = date("m");
				$year = date("Y");
			} else {
				$finalDate = mktime(0, 0, 0, $month, $thisDay, $year);
				$fdf = mktime(0, 0, 0, $month, 1, $year);
			}
 
			// Skip some cells to take into account for the weekdays.
			if($i == 0) {
				$firstDay = date("w", $fdf);
				$skip = ($firstDay - 1);
				if($skip &lt; 0) { $skip = 6; }
 
				for($s=0; $s&lt;$skip; $s++)
				{
					echo '

 

 
';
				}
			}
 
			// Make the weekends a darker colour.
			if((date("w", $finalDate) == 0) || (date("w", $finalDate) == 6)) {
				$bgColor = '#CCC';
			} else {
				$bgColor = '#f0f2ff';
			}
 
             // == Add any database query here using $finalDate as the timestamp for this date.
 
			// Display the day.
			echo '
 
. $thisDay .'" style="cursor: pointer">
 
onMouseOver="highlightCalendarCell('calendarDay_'. $thisDay .'')"
									onMouseOut="resetCalendarCell('calendarDay_'. $thisDay .'')">
						'. $thisDay .'
 
';
		}
		break;
	}
 
?&gt;

The final part is the one that ties it all together. This javascript is placed at the bottom of the page, within the < body > tags.

<script type="text/javascript">
		startCalendar(0,0);
	script>

Now for a short explaniation…
If startCalendar(0,0) is called like so, with zeros, it defaults to the current month, if you have a look at the RPC file, at the top, you will notice there is a line that is if $month == 0 and $year == 0, then the date is date(“m”); (i think).

Next we are making the form for selecting the month and year, at the same time making the selected month and year (gotten by $month and $year) the current ones in the drop doen boxes.

Now we are just displaying the days of the week so the calendar is readable.
Now the difficult part, determining the timestamp incase we want to use the database.
Skipping some days to take into account days from the previous month, so the 1st of the month starts ont he proper week day, thats a tough one.
Then its just spitting out the calendar.

And here is the Piece De Resistance, if you can call it that…
http://res.nodstrum.com/calendar/

And now for the downloads:
Calendar System ZIP