How To Live Mysql Data Search in Codeigniter Using Ajax Jquery

0
82

In the event that you are looking of web instructional exercise on How to Search Live Data in Codeigniter by utilizing Ajax with Jquery, at that point here we have talk about theme something like Live Mysql Table Data Search by utilizing Ajax JQuery in Codeigniter Framework. We have just distributed web instructional exercise on Ajax live information search utilizing PHP Script with Ajax Jquery. We have make same thing in Codeigniter system moreover. In such a case that some web designer utilizing Codeigniter system for their web improvement then they can follow this source code for Live Table information search.

This is ajax driven live table looking through instructional exercise in which when client has start type something then he can get channel information as indicated by string which he has type without invigorate of site page, in light of the fact that here we have use Ajax with Codeigniter. Here table will show channel information progressively when any client has types some string in the pursuit textbox. This element we have actualize in Codeigniter with Ajax Jquery.

In the event that you would prefer not to utilize Jquery Datatables for show Mysql table information for show in plain arrangement then you can utilize this sort of code for making live information search capable table. For causing this live information accessible table we to have use Ajax Jquery with Codeigniter system. Beneath you can discover total source code of this instructional exercise.

Content

  1. Mysql Database
  2. DataSearch – Page View
  3. DataSearch – Controller
  4. DataSearch – Models

Connect Your Database Connection

DataSearch – Page View

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Live Mysql Data Search in Codeigniter Using Ajax Jquery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
  <div class="container">
   <br />
   <br />
   <br />
   <h2 align="center">Live Data Search in Codeigniter using Ajax JQuery</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">HSN Code</span>
     <input  type="text" placeholder="Type Your HSN Code" class="form-control" id="search_text" name="product_code">
    </div>
   </div>
   <br />
   <div id="result"></div>
  </div>
  <div style="clear:both"></div>
  <br />
  <br />
  <br />
  <br />
 </body>
</html>

<script type="text/javascript">
    
    $(document).ready(function(){

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

            console.log("My query:",$(this).val());
            var str = $(this).val();
            var len = str.length;
            if(len < 2){
                $('#result').html("");
                return false;
            }
            $.ajax({
               url:"<?php echo base_url(); ?>products/fetch",
               method:"POST", 
               data:{query:$(this).val()},
               success:function(data){
                $('#result').html(data);
               }
            })

        });

    });

</script>

DataSearch – Controller

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class DataSearch extends CI_Controller {
	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see https://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->load->view('datasearch');
	}

public function fetch() 
{
    $output = '';
    $query = '';
    $this->load->model('dataSearches_model');
    if($this->input->post('query'))
    {
        $query = $this->input->post('query');
    }
    $data = $this->dataSearches_model->fetch_data($query);
    $output .= '
        <div class = "table-responsive">
            <table class = "table table-bordered table-striped">
            <tr>
                <th>HSN Code</th>
                <th>Description</th>
            </tr>
    ';
    if($data->num_rows() > 0)
    {
        foreach ($data->result()as $row) 
        {
            $output .='
                        <tr>
                        <td>'.$row->hsn_code.'</td>
                        <td>'.$row->description.'</td>
                        </tr>';
        }
    }
    else
    {
        $output .= '<tr>
                        <td colspan="5">No data Found</td>
                    </tr>';
    }
    $output .= '</table>';
    echo $output;
}
}

DataSearch – Models

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class DataSearches_model extends CI_Model  {
	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see https://codeigniter.com/user_guide/general/urls.html
	 */
public function fetch_data($query)
{
    $this->db->select("*");
    $this->db->from("data_search");
    if($query != '')
    {
        $this->db->like('hsn_code', $query);
        $this->db->or_like('description', $query); 
    }
    $this->db->limit(10);
    $this->db->order_by('id', 'DESC');
    return $this->db->get();
}
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here