Grid php search engine based on input field value

[dan123Participant]

Hi I want a good example of a php search engine for the grid. Where there is a input text box and submit button, the user types in the value in the textbox and clicks the search button. The grid will load up and populate with data.

<index.php>
var source =
{
datatype: “json”,
type: “POST”,
datafields: [
{ name: ‘CustomerID’},
{ name: ‘CompanyName’},
{ name: ‘ContactName’},
{ name: ‘ContactTitle’},
{ name: ‘Address’},
{ name: ‘available’}
],
url: ‘search.php’,
filter: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
//keyboardnavigation: false,
filterable: true,
sortable: true,
editable: true,
showfilterrow: true,
altrows: true,
autoheight: true,
enablehover: true,
pageable: true,
pagesize: 2,
columnsresize: true,
columnsreorder: true,
//rowsheight: 35,
enablebrowserselection: true,
selectionmode : ‘none’,
keyboardnavigation: false,
//enabletooltips: true,
//selectionmode: ‘checkbox’,

columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 100},
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
{ text: ‘Address’, datafield: ‘Address’, width: 200 }
]
});

<form action=”index.php?go” method=”POST” name=”search”>
<input type=”text” name=”search_box” value=””/>
<button id=”search” type=”submit” name=”search” value=”Button”>Button</button>
</form>

<search.php>
<?php
#Include the connect.php file
include(‘connect.php’);
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die(‘Could not connect: ‘ . mysql_error());
//Select The database
$bool = mysql_select_db(‘customers’, $connect);
if ($bool === False){
print “can’t find $database”;
}

$search_term = mysql_real_escape_string($_POST[‘search_box’]);
$query = “SELECT * FROM customers WHERE ContactTitle = ‘$search_term'”;
// sort data.

if (isset($_GET[‘search’]))
{
$search_term = mysql_real_escape_string($_POST[‘search_box’]);
$query = “SELECT * FROM customers WHERE ContactTitle = ‘$search_term'”;

}
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$customers[] = array(
‘CustomerID’ => $row[‘CustomerID’],
‘CompanyName’ => $row[‘CompanyName’],
‘ContactName’ => $row[‘ContactName’],
‘ContactTitle’ => $row[‘ContactTitle’],
‘Address’ => $row[‘Address’],
‘City’ => $row[‘City’]
);
}
echo json_encode($customers);
?>

[ChristopherParticipant]

Hi dan123,

Here’s an example with a search text field that populates the jqxGrid when you type in something.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?light

You can add a Submit button next to the inputText box in the toolbar and load the new data on click of the button, using the updatebounddata callback. The url of the data source should point to your “search.php” file that returns the new JSON with the search results from the input.

Here is a similar topic that you might find usefull:
http://www.jqwidgets.com/community/topic/search-in-toolbars/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts