mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Tutorials > Very Easy Ajax With Jwee

Tutorial example



For this tutorial we will be building a search box with ajax-driven auto-completation. This tutorial will teach you the basics of using ajax, and also about using dom events.

HTML ingredients:
A <INPUT> box with the id of “searchbox”.
A <DIV> box below the input box with the id of “resultsbox”.

You probably have already noticed that the example to the left is acftually working, and using server side data.

Server-side ingredients:
We built a short PHP script to simulate a real database. The database is an array contains the name of every function in the PHP language. Why? Because we can easily get this array by the PHP command get_defined_functions(), so its easy. The php file ajax.tutorial1.php expects a GET query string variable called search. The “search” variable should equal the current value of the input box on the website.

Show me the PHP code
See example of PHP output

The Javascript

The very first thing is to define the relevent HTML elements. So for the rest of the tutorial we assume these two variables:

	var searchbox = $('searchbox');
	var resultsbox = $('resultsbox');

The “searchbox” is the textbox, and “resultsbox” is the box below the textbox where the autocomplete suggestions are going to go.

Now, there are at least a dozen different ways to go about coding this. For this tutorial, our code will be straight-forward and simple.

The first thing we need do is add a event to the searchbox, so we capture key presses. We are going to use onkeyup as the event of choice. You shouldn't use onkeydown for something like this, because at the time of onkeydown the key just pressed has not yet been added into the text box.

Here is our event handling code:

	searchbox.observe( 'keyup', 
	function() {
		if( this.lastValue && this.lastValue == this.value ) return;
		this.lastValue = this.value;

We will get to the doAjaxSearch part in just a moment, and you will see. In the above code, we use .observe to add a keyup event. One thing to note is that this in the our event function refers to searchbox.

The first two lines of event function above check the value of our search box. If the value (or search query) is the same as it was before, then we do not need to run another identical ajax request. Next, we call our function doAjaxSearch. The call to .later(250) means call doAjaxSearch in 250 millaseconds from now. Why the delay? As a user is typing, rather than run the ajax search after every letter, we want to give the user a chance to finish typing first. People often type on quick bursts of letters, only pausing when they are unsure, or are expecting an autocomplete feature.

Next, we define the function doAjaxSearch().

	function doAjaxSearch() {
			{search: searchbox.value}


Discussion on /learn/tutorials/ajax

LJay 06/10/14 :  

@Xymon, where is that tutorial u where talking about?

Xymon 11/05/14 :  

There will be a ajax tutorial in my tutorial, this will cover pretty much everything in jwee.

TheDoctor 11/05/14 :  

You could create another ajax tutorial?