Simple Autocomplete

In this tutorial we will create a simple autocomplete and will explain every line of the code.
The exmple provided here will act as basic for all other examples.

In order examples to work we suppose that the northwind database (which is bound in the jqSuite package) is installed on your machine.
All exmplaes are included into the packege in examples/autocomplete directory

Let suppose that we have a form element which contain a company field wich should be filled with the autocomplete.
Lets create our index page which contain the form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First PHP jqAutocomplete </title> 

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui.custom.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>

</head>
<body>

<form action="#">
   <label for="company">Company: </label>
   <input id="company" />
   <input type="submit" name="submit" value="Submit" />
</form>

<?php include "autocomplete.php";?>
</body>
</html>

Omitting the meta and title tag in the HTML document we contiue with these lines of code

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui.custom.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.custom.min.js" type="text/javascript"></script>

Generally, you'll need to include these 3 files on any page to use jQuery UI widgets and interactions:

jquery-ui.custom.css refer to jQuery UI Cascading Style Sheet File
jquery.js refers to jQuery library
jquery-ui.custom.min.js refer to jQuery UI

The autocomplete.php file has the following code:

<?php
// include the Database driver class (we will use PDO).
require_once 'jq-config.php';
require_once "php/jqGridPdo.php";

// include the jqUtils Class. The class is needed in all jqSuite components.
require_once "php/jqUtils.php";

// include the jqAutocomplete Class
require_once "php/jqAutocomplete.php";

// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

// create autocomplete instance
$ac = new jqAutocomplete($conn);
//write the select command
$ac->SelectCommand = "SELECT CompanyName FROM customers WHERE CompanyName LIKE ? ORDER BY CompanyName";
// set the source from where to get data. In this case it is the same file.
$ac->setSource("autocomplete.php");
// Enjoy
$ac->renderAutocomplete("#company");

?>

As canb be seen the autocomplete can be set only 4 lines of code.