Auto-Complete using jqxInput, PHP and MySQL

The task is to implement a search field bound to MySQL Database. When the user types something in the search field, it will connect to the Database and search for matches. The results will be displayed in the jqxInput’s popup.

The required PHP code is below. The parameter that we pass from the client to the server is called “query”. Depending on that parameter, the MySQL Query is built.


#Include the connect.php file
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print "can't find $database";
// get the search query.
$searchQuery = $_GET['query'];
// get data and store in a json array
$query = "SELECT * FROM Customers";
$from = 0;
$to = 10;
// get the results that match the search query.
$query .= " WHERE ". 'CompanyName' . " LIKE '" . $searchQuery ."%'";
// limit the query to 10 results.
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$customers[] = array(
'CompanyName' => $row['CompanyName'],
'ContactName' => $row['ContactName'],
'ContactTitle' => $row['ContactTitle'],
'Address' => $row['Address'],
'City' => $row['City']
echo json_encode($customers);

# FileName="connect.php"
$hostname = "localhost";
$database = "northwind";
$username = "root";
$password = "";

The client side includes initialization of the jqxInput widget and setting its “source” property to a function. By default, jqxInput passes 2 parameters to its source object – the current search “query” and a “response” callback method. We use the first parameter to create a jqxDataAdapter instance that will send requests for new data to the server – see the “formatData” function. The second parameter is used in the jqxDataAdapter’s “loadComplete” callback. “loadComplete” is called when the client received data from the server. The results from the “response” callback function will be displayed in the jqxInput’s Popup.


<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
theme: 'classic',
width: 200,
height: 25,
source: function (query, response) {
var dataAdapter = new $.jqx.dataAdapter
datatype: "json",
datafields: [
{ name: 'CompanyName', type: 'string'}
url: 'data.php'
autoBind: true,
formatData: function (data) {
data.query = query;
return data;
loadComplete: function (data) {
if (data.length > 0) {
response($.map(data, function (item) {
return item.CompanyName;
<body class='default'>
<input id="jqxinput"/>

About admin

This entry was posted in jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets and tagged , , , . Bookmark the permalink.

Leave a Reply