jQuery EasyUI form-filter drop-down data grid

The common point between the drop-down data grid (Combogrid) component and the drop-down box (Combobox) component is that they are all based on the data grid (Datagrid) except that they both have a drop-down panel. The drop-down data grid (Combogrid) component can filter, paginate, and has some other functions of the data grid (Datagrid). This tutorial shows you how to filter data records in a dropdown data grid (Combogrid) component.

Create dropdown data grid (Combogrid)

<input id="cg" style="width:150px">

$('#cg').combogrid({
    panelWidth:500,
    url: 'form5_getdata.php',
    idField:'itemid',
    textField:'productid',
    mode:'remote',
    fitColumns:true,
    columns:[[
        {field:'itemid',title:'Item ID',width:60},
        {field:'productid',title:'Product ID',align:'right',width:80},
        {field:'listprice',title:'List Price',align:'right',width:60},
        {field:'unitcost',title:'Unit Cost',align:'right',width:60},
        {field:'attr1',title:'Attribute',width:150},
        {field:'status',title:'Stauts',align:'center',width:60}
    ]]
});

The dropdown data grid (Combogrid) component should define 'idField' and 'textField' properties. The 'idField' property stores the component value, and the 'textField' property displays the text message in the input text box. The dropdown data grid (Combogrid) component can filter records in 'local' or 'remote' mode. In remote (remote) mode, when the user enters characters into the input text box, the drop-down data grid (Combogrid) will send the 'q' parameter to the remote server.

server side code

form5_getdata.php

$q = isset($_POST['q']) ? strval($_POST['q']) : '';

include 'conn.php';

$rs = mysql_query("select * from item where itemid like '%$q%' or productid like '%$q%'");
$rows = array();
while($row = mysql_fetch_assoc($rs)){
    $rows[] = $row;
}
echo json_encode($rows);