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.
data.php
connect.php
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.
index.php
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.
data.php
<?php#Include the connect.php fileinclude('connect.php');#Connect to the database//connection String$connect = mysql_connect($hostname, $username, $password)or die('Could not connect: ' . mysql_error());//select databasemysql_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);?>
connect.php
<?php# 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.
index.php
<!DOCTYPE html><html lang="en"><head> <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 () { $("#jqxinput").jqxInput( { 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; })); } } } ); } }); }); </script></head><body class='default'> <input id="jqxinput"/></body></html>
The post Auto-Complete using jqxInput, PHP and MySQL appeared first on Javascript, HTML5, jQuery Widgets.