jQuery UI Widgets Forums Grid Grid php search engine based on input field value

This topic contains 1 reply, has 2 voices, and was last updated by  Christopher 6 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • dan123
    Participant

    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);
    ?>


    Christopher
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.