Cloning Google Suggest With Ajaxac
Introduction
This article covers how to implement a system such as Google Suggest using JavaScript, CSS and PHP.
To aid us in this process we will be using AjaxAC, an open-source framework written in PHP used to develop AJAX style applications. This is being developed with version 0.41 of the framework. We will aim to keep this article up-to-date with the latest version of AjaxAC, as its interface is likely to change before its first stable release.
AJAX — Asynchronous JavaScript and XML — is the term given to a web application or solution using JavaScript, CSS and XML. This fundamental idea behind AJAX is the usage of the XMLHttpRequest object, which allows a web page to make subsequent HTTP requests in the background to update the state of the page.
Google Suggest is a frontend to Google which will offer suggestions to search for as you type your query. When you type a keyword, a dropdown list will appear with terms beginning with what you have typed and how many results they will yield if you select to search for them. You can use your up/down arrow keys to select one of these suggestions. Alternatively, you can use your mouse to select an option, and initiate the search by clicking on the option.
We will be implementing a clone of this application, from start to finish. This begins with setting up our frontend HTML file and CSS styles, creating our AjaxAC GoogleSuggestCloneJax application, and then linking it all together. There will be a few modifications to Google Suggest, the main one relating to the fact we don’t have an index of 8 billion pages behind us! We will use a MySQL database to fetch all the suggestion data, to demonstrate how to use MySQL in AjaxAC.
So let’s get started. This is a fairly long article, but hopefully will be a good reference for HTML, CSS, JavaScript, PHP and AJAX! Our final result in this article – the GoogleSuggestCloneJax application – is included as an example application in the AjaxAC distribution (as of version 0.4).