Ajax live search table generation using codeigniter

Ajax live search table generation using codeigniter

In this post we will show you Ajax live search table generation using codeigniter, hear for Ajax live search table generation using codeigniter we will give you demo and example for implement.

Today I will show how to make an ajax driven live search table using jquery and PHP. The table will generate in real time when the user types some value in the search box. We implement this in CodeIgniter by using 2 view pages,  one view contains the search box and other view will create the ajax driven search box. 

The jquery code is given below

<script>
$(document).ready(function(){
   $("#search").keyup(function(){
       var str=  $("#search").val();
       if(str == "") {
               $( "#txtHint" ).html("<b>Book information will be listed here...</b>"); 
       }else {
               $.get( "<?php echo base_url();?>home/ajaxsearch?id="+str, function( data ){
                   $( "#txtHint" ).html( data );  
            });
       }
   });  
});  
</script>

The ajax is triggered by typing in search box by using keyup function in jquery. $.get function will fetch data from ajaxsearch function in home controller and it will be appended to div container with id texthint.

The complete code for input view is given below

<div class="container">
    
 <!-- search box container starts  -->
 
    <div class="search">
        <div class="space"></div>
  <form action="" method="get">
    
      <div class="row">
       <div class="col-lg-10 col-lg-offset-1">
        <div class="input-group">
            
            <span class="input-group-addon" >BOOK SEARCH</span>
  <input autocomplete="off" id="search"  type="text" class="form-control input-lg" placeholder="Search Book name or Author " >
   
        </div>
       </div>
      </div>   
      <div class="space"></div>
  </form>
     </div>  
  <!-- search box container ends  -->
  
    
     <div id="txtHint" style="padding-top:50px; text-align:center;" ><b>Book information will be listed here...</b></div>
     
</div>
<script>
// above script codes... 
</script>

Now the code for output view

<?php
 if(!empty($booktable ))  
 { 
    
      $output = '';
      $outputdata = '';  
      $outputtail ='';

      $output .= '<div class="container">
                   <div class="table-responsive">
                   <table class="table table-bordered">
                 <thead>
                          <tr>
         <th>Book No</th>
                              <th>Book Name</th>
                              <th>Author</th>
                              <th>Price</th>
             </tr>
       
                   </thead>
                   <tbody>
                   ';
                  
      foreach ($booktable as $objects)    
    {   
           $outputdata .= ' 
                
                    <tr> 
              <td >'.$objects->BOOKID.'</td>
              <td >'.$objects->TITLE.'</td>
              <td>'.$objects->AUTHOR.'</td>
                            <td>'.$objects->PRICE.'</td>
                    </tr> 
                
           ';
        //  echo $outputdata; 
                
          }  

         $outputtail .= ' 
                         </tbody>
                         </table>
                         </div>
                         </div> ';
         
         echo $output; 
         echo $outputdata; 
         echo $outputtail; 
 }  
 
 else  
 {  
      echo 'Data Not Found';  
 } 

The home controller code is given below

 public function ajaxsearch()
    {
      
       if(is_null($this->input->get('id')))
        {

        $this->load->view('input');    
  
        
        }
        else
        {
        $this->load->model('Bookmodel'); 
        
        $data['booktable']=$this->Bookmodel->booktable($this->input->get('id')); 
        
        $this->load->view('output',$data);
        
        }
        
       
    }

The code for booktable function in Bookmodel is given below

function booktable($search){

        $query = $this
                ->db
                ->select('*')
                ->from('book')
                ->like('TITLE',$search)
                ->or_like('AUTHOR',$search)
                ->get();
     
        if($query->num_rows()>0)
        {
            return $query->result(); 
        }
        else
        {
            return null;
        }  
}

The sample output image of above result is given below

Hope this code and post will helped you for implement "Ajax live search table generation using codeigniter. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org