Live Data Search in Codeigniter using Ajax JQuery

If you are looking of web tutorial on How to Search Live Data in Codeigniter by using Ajax with Jquery, then here we have discuss topic something like Live Mysql Table Data Search by using Ajax JQuery in Codeigniter Framework. We have already published web tutorial on Ajax live data search using PHP Script with Ajax Jquery. We have make same thing in Codeigniter framework also. Because if some web developer using Codeigniter framework for their web development then they can follow this source code for Live Table data search.

This is ajax driven live table searching tutorial in which when user has start type something then he can get filter data according to string which he has type without refresh of web page, because here we have use Ajax with Codeigniter. Here table will display filter data in real time when any user has types some string in the search textbox. This feature we have implement in Codeigniter with Ajax Jquery.

View Demo

If you do not want to use Jquery Datatables for display Mysql table data for display in tabular format then you can use this type of code for making live data search able table. For making this live data searchable table we have use Ajax Jquery with Codeigniter framework. Below you can find complete source code of this tutorial.

Download Source Code

Source Code

Ajaxsearch.php - Controllers


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

class Ajaxsearch extends CI_Controller {

 function index()
 {
  $this->load->view('ajaxsearch');
 }

 function fetch()
 {
  $output = '';
  $query = '';
  $this->load->model('ajaxsearch_model');
  if($this->input->post('query'))
  {
   $query = $this->input->post('query');
  }
  $data = $this->ajaxsearch_model->fetch_data($query);
  $output .= '
  <div class="table-responsive">
     <table class="table table-bordered table-striped">
      <tr>
       <th>Customer Name</th>
       <th>Address</th>
       <th>City</th>
       <th>Postal Code</th>
       <th>Country</th>
      </tr>
  ';
  if($data->num_rows() > 0)
  {
   foreach($data->result() as $row)
   {
    $output .= '
      <tr>
       <td>'.$row->CustomerName.'</td>
       <td>'.$row->Address.'</td>
       <td>'.$row->City.'</td>
       <td>'.$row->PostalCode.'</td>
       <td>'.$row->Country.'</td>
      </tr>
    ';
   }
  }
  else
  {
   $output .= '<tr>
       <td colspan="5">No Data Found</td>
      </tr>';
  }
  $output .= '</table>';
  echo $output;
 }
 
}

Ajaxsearch_model.php - Models


<?php
class Ajaxsearch_model extends CI_Model
{
 function fetch_data($query)
 {
  $this->db->select("*");
  $this->db->from("tbl_customer");
  if($query != '')
  {
   $this->db->like('CustomerName', $query);
   $this->db->or_like('Address', $query);
   $this->db->or_like('City', $query);
   $this->db->or_like('PostalCode', $query);
   $this->db->or_like('Country', $query);
  }
  $this->db->order_by('CustomerID', 'DESC');
  return $this->db->get();
 }
}
?>

ajaxsearch.php - Views


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Live 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">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
    </div>
   </div>
   <br />
   <div id="result"></div>
  </div>
  <div style="clear:both"></div>
  <br />
  <br />
  <br />
  <br />
 </body>
</html>


<script>
$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"<?php echo base_url(); ?>ajaxsearch/fetch",
   method:"POST",
   data:{query:query},
   success:function(data){
    $('#result').html(data);
   }
  })
 }

 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
</script>

Database


--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_customer`
--

CREATE TABLE `tbl_customer` (
  `CustomerID` int(11) NOT NULL,
  `CustomerName` varchar(250) NOT NULL,
  `Address` text NOT NULL,
  `City` varchar(250) NOT NULL,
  `PostalCode` varchar(30) NOT NULL,
  `Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_customer`
--

INSERT INTO `tbl_customer` (`CustomerID`, `CustomerName`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Maria Anders', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
(2, 'Ana Trujillo', 'Avda. de la Construction 2222', 'Mexico D.F.', '5021', 'Mexico'),
(3, 'Antonio Moreno', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
(4, 'Thomas Hardy', '120 Hanover Sq.', 'London', 'WA1 1DP', 'UK'),
(5, 'Paula Parente', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(6, 'Wolski Zbyszek', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
(7, 'Matti Karttunen', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
(8, 'Karl Jablonski', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'USA'),
(9, 'Paula Parente', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(10, 'Pirkko Koskitalo', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
(11, 'Ronald Bowne', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),
(12, 'Joyce Rosenberry', 'Norra Esplanaden 56', 'HELSINKI', '00380', 'Finland'),
(13, 'Jeff Putnam', 'Industrieweg 56', 'Bouvignies', '7803', 'Belgium'),
(14, 'Trina Davidson', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  ADD PRIMARY KEY (`CustomerID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  MODIFY `CustomerID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15;

21 comments:

Unknown5 April 2018 at 03:05
hello,

your above code is not working. please tell me solution. i am new one in codeignitor.
Unknown24 September 2018 at 02:07
Awesome!
Unknown16 November 2018 at 23:57
i try this code, but when search not working
Heavy equipment30 November 2018 at 01:38
How to create dynamic search in codeigniter website for this website https://www.heavyequipments.in
Sumit Kumar Gupta14 January 2019 at 10:41
Thanks man. This code is very helpful for me.
Mango man15 January 2019 at 09:16
please let me know if i have a database with the name "internet" and table is "customers" but according to your code you just added the table name but didn't add the db name. why?

i have already created a data table which is showing all customer records. please let me know what should i have to add in my data table code.

Many Thanks.
Freemovie15 March 2019 at 00:54
If the code doen't work pls add this code under controller->fectch()

$this->load->database();
Amos NDAYISHIMIYE25 April 2019 at 14:58
thx very much
intramuralWeb.ga20 September 2019 at 00:49
forbidden... ??
Software Company in Latifabad 28 February 2020 at 03:16
kk
Unknown17 February 2020 at 04:53
fetch method not found error
Unknown9 August 2020 at 23:50
not show data no error
Waleed Barakat30 August 2020 at 16:11
Awesome, Works like a charm, very smart and easy to configure. Thank you :)
Abhishek Dubey6 January 2021 at 23:19
your code is showing error
suryakanta17 April 2021 at 09:09
its work..thank you sir
Unknown27 April 2021 at 21:55
where the fetch method called
socceroo12 May 2021 at 02:12
Hi, Thankyou so much for this, works like a charm. Is there a version for Bootstrap 4?
Unknown15 June 2021 at 12:07
Aucune erreur mais pas des données afficher. Si quelqu'un peut m'aider merci
PARIPURNAM9 April 2024 at 20:23
Step:2
Download Codeigniter from Official website
https://codeigniter.com/download

Step:3
Download xampp server and Install
https://www.apachefriends.org/

Step:4
Download Visual Studio Code
https://code.visualstudio.com/

Step:5
Install the Visual Studio code
https://www.youtube.com/watch?v=CPmQwlycfGI

Step:6
visual studio code best extensions for code codeigniter
https://www.youtube.com/watch?v=-m6QLfYKJ5k

Step:7
Pest the Codeigniter xampp htdocs
Rename te project Name
Step:08
Call the page
http://localhost/1_Gurudev/2_Codeigniter3/Search_ajax/

Create Database (Database.php)
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'toko',
'dbdriver' => 'mysqli',

‘Database’ Add in libraries in Autyoload.php
$autoload['libraries'] = array('database', 'email', 'session');

Route create
$route['search']='AjaxSearchController/index';

index.php remove
.htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php/$0 [PT,L]

Webslesson

PHP, Node.js, React.js, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Saturday, 10 March 2018