This blog will explain you how to search data from MySQL database using PHP CodeIgniter, Ajax and JQuery with example where search result will be displayed as you type something in textbox. The data will be populating asynchronously for which Ajax has been used in this blog.

Database: I’m assuming that you created database and table for tbl_product (Fields: product_id ,product_name ,product_price, product_img ,product_qty ,product_desc).

In this code, I used JQuery and Ajax for searching data from database using keyup features of textbox. So, when user type in textbox and if that text related data store in database then you can see related data below the textbox.

Step 1: First create controller in application -> controllers folder and write below code in it. I created SearchController.php file.  

SearchController.php 

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class SearchController extends CI_Controller

{

    function __construct()

    {

        parent::__construct();

        $this->load->helper('url'); /* Load base url */

        $this->load->model('SearchModel'); /* Load model default which you create */

    }

    public function SearchDataCi()

    {

        $this->load->view('ajaxsearchci');

    }

    public function FetchProductData()

    {

        $output = '';

        $search = '';

        if ($this->input->post('search'))

        {

            $search = $this->input->post('search');

        }

        

        $data = $this->SearchModel->fetchallproductdata($search);

        

        $output .= '<table border="2">

                       <thead>

                         <tr>

                           <th>Product Name</th>

                           <th>Product Price</th>

                           <th>Product Image</th>

                           <th>Product Quantity</th>

                           <th>Product Description</th>

                         </tr>

                       </thead>

                     <tbody> ';

        if ($data->num_rows() > 0)

        {

            foreach ($data->result() as $row)

            {

                $output .= '<tr>

                              <td>' . $row->product_name . '</td>

                              <td>' . $row->product_price . '</td>

                              <td><img src="http://localhost/CodeIgniter-3.1.6/assets/Admin/product_images/' . $row->product_img . '" height="100" width="100"></td>

                              <td>' . $row->product_qty . '</td>

                              <td>' . $row->product_desc . '</td>

                            </tr>';

            }

        }

        else

        {

            $output .= '<tr>

                          <td colspan="5" align="center">Record not found</td>

                        </tr>';

        }

        $output .= '</tbody>

                  </table>';

        

        echo $output;

    }

}

?>

Step 2: After creating controller create model in application -> models folder and write below code in it. I created SearchModel.php file.    

SearchModel.php

<?php

class SearchModel extends CI_Model

{

    public function fetchallproductdata($search)

    {

        $this->db->select('*');

        $this->db->from('tbl_product');

        $this->db->like('product_name', $search);

        return $this->db->get();

    }

}

?>

Step 3: After creating model create view file in application -> views folder and write below code in it. I created ajaxsearchci.php  file.

ajaxsearchci.php

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax Search PHP CodeIgniter</title>

    <style>

        .searchdata

        {

            width: 50%;

            height: 30px;

            border-color: grey;

            padding-left: 10px;

            font-size: 15px;

        }

        table

        {

            width:100%;

            text-align:center;

            margin-top:20px;

        }

        th

        {

            height: 30px;

            background-color: grey;

        }

        tr

        {

            background-color: rgb(236,234,234);

        }

    </style>

</head>

<body>

    <center>

        <h1>Ajax Data Search using JQuery CodeIgniter MySQL</h1>

        <form method="post">

            <input type="text" name="searchdata" id="searchdata" class="inputsearch" placeholder="Search data product name wise..">

        </form>

        <div id="showdata">

        </div>

    </center>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

    $(document).ready(function(){

      $("#searchdata").keyup(function(){

        var search = $(this).val();

        if(search != '')

        {

            $.ajax({

            url: "<? php echo base_url(); ?>index.php/SearchController/FetchProductData",

            method: "POST",

            data: {search:search},

            success: function(data)

            {

                $('#showdata').html(data);  

            }

          });

        }

      });

    });

</script>

</html>

Output

Note: There will no data be display when page load first time. When you type in textbox and if related that text data available in database then you can see the data below the textbox.