The term "AJAX" refers to a web programming technique where JavaScript is used to perform an HTTP request from a URL. This allows dynamic content to be loaded from a database on the webserver without refreshing the page. It is very common in modern web sites and applications.

One of the most popular uses for AJAX is auto-completion. The user types text into a field, and the JavaScript automatically queries a script on the server as they type to suggest possible completions. In this lesson we show how to do this using LiveCode by creating a text field where the user enters their country.

This lesson uses the jQuery library to make the JavaScript as easy as possible. jQuery is a widely used library with good documentation at their site.

As this is a LiveCode Server lesson, we don't spend too much time looking at the basic HTML page. Instead we just take it from an existing AJAX auto-complete tutorial from the web.

Download the source ZIP using the link at the bottom of the page and you should have a fully working AJAX auto-complete example that depends on a MySQL database and PHP. Don't bother setting up the database for now. Although using a database for this is a good idea and probably the best way to do this for a production application, we'll use a text file instead so we can skip to the important parts.

Open up the HTML page in a text editor and find the JavaScript section near the top. There is a function called "lookup". This needs to be replaced with our own version which uses a LiveCode page. The new code is shown below. Note that we've split off the callback into a separate function for clarity and changed the AJAX request a little, but the logic from the original script stays intact.

function lookup(inputString)

{

if (inputString.length == 0)

   {

// Hide the suggestion box.

$('#suggestions').hide();

}

   else

   {

$.ajax({

                url: "autocomplete.lc?string=" + inputString,

                type: "GET",

                success: function(data) { lookupCallback(data); }

     });

}

} // lookup

function lookupCallback(data)

{

  if(data.length >0)

    {

      $('#suggestions').show();

      $('#autoSuggestionsList').html(data);

    }

}

In the autocomplete folder, next to the other files including index.htm, create a file called "autocomplete.lc". This will replace the file "rpc.php". Edit this with a text editor, and place the following LiveCode script into it:

<?lc

function getAutoComplete p_string

local tCompletionsFile

put "/home/oliverk/public_html/examples/autocomplete/countries.txt" into tCompletionsFile

local tCompletions

put url ("file:" & tCompletionsFile) into tCompletions

filter tCompletions with (p_string & "*")

local tTemplate

put "<li onClick=[[quote]]fill('[[tCompletion]]');[[quote]]>[[tCompletion]]</li>" into tTemplate

local tOutput

repeat for each line tCompletion in tCompletions

put merge(tTemplate) & return after tOutput

end repeat

delete the last char of tOutput

return tOutput

end getAutoComplete

put getAutoComplete($_GET["string"])

?>

This code is called whenever the user enters some text in the field on the HTML page. It loads a text file which contains a list of possible countries (one-per-line) and filters out the countries which the user could be typing. It then returns appropriate HTML to display these.

We've done this for you by finding a list of countries on a website and using a quick bit of LiveCode in the message box to process it. The finished list is available at this URL: http://oliverk.on-rev.com/examples/autocomplete/countries.txt. Save it to "countries.txt" in the autocomplete folder. If you then upload the whole folder to your on-rev account, it should all work.