laravel simple search with ajax tutorial with hindi video | how to search laravel ajax tutorial

this tutorial about how to data live search in laravel with help of jquery and ajax. here we step by step explain laravel live searching without page refresh.

laravel live search

this tutorial tell about laravel live data searching in ajax jquery.when we use simple searching than after search this page is refresh but javascript library ajax prevent to page reload ajax send request to server it get search value in a variable and send it to laravel controller method and where to data search and filter and become filtered data.but in this process ouer page is not refresh

Use this code in controller.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Pagination\Paginator;
use Validator;
use App\Models\Exam;

class Examcontroller extends Controller
{

    public function examshow(){
        
        $exams = Exam::paginate(3);
        return view('exam.exammanage',compact('exams'));
    }

    public function examshow_ajax(Request $request){
        if($request->ajax())
         {

              $search = $request->get('search');
              $search = str_replace(" ", "%", $search);
            	$exams = Exam::where('id', 'like', '%'.$search.'%')
                          ->orWhere('title', 'like', '%'.$search.'%')
                          ->paginate(10);
            return view('exam.ajax_data', compact('exams'));
         }
    }
} 

Use this in our view files

this is our first view file where our all data list. in this view file use jquery and bootstrap links and list our exams table data and make an ajax request by fetch_data() method.its path in views/exam/exammanage

    <h3>Exams</h3>>
    <input type="text" id="exam_search"  placeholder="Search for...">
    <div class="x_content">
      <table class="table table-striped table-bordered" style="width: 50%;">
        <thead>
          <tr>
            <th class="exam_sorting" data-sorting_type="asc" data-column_name="id" style="cursor: pointer">Id</th>
            <th class="exam_sorting" data-sorting_type="asc" data-column_name="title" style="cursor: pointer">Name<span id="name_icon">Title</th>
            <th>Exam Date</th>
          </tr>
        </thead>
        <tbody>
          @include('exam.ajax_data')
        </tbody>
      </table>
    </div>
    <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
    <input type="hidden" name="hidden_column_name" id="hidden_column_name" value="id" />
    <input type="hidden" name="hidden_sort_type" id="hidden_sort_type" value="asc" />


    <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>
    
    <script type="text/javascript">
  
    $(document).ready(function(){
      
    function fetch_data(search="") {
      $.ajax({
         url:BASE_URL+"/exam_manage_ajax?search="+search,
         success:function(data){
          $('.x_content tbody').html(data);
         }
      })
     }

     $(document).on('keyup', '#exam_search', function(){
        var search = $('#exam_search').val();
        fetch_data(search);
     });


    });

    </script>

put this code in our second view file where our exam data which are filtered by ajax request and it print on table body on ajax success .which path is /views/exam/ajax_data

@foreach($exams as $exam)
          <tr>
            <td>{{$exam->id}}</td>
            <td>{{$exam->title}}</td>
            <td>{{$exam->exam_date}}</td>
          </tr>
@endforeach
<tr class="exam_pagin_link">
  <td colspan="6" align="center">{{$exams->links()}}</td>
</tr>

These are our route files

we use get method to send search variable throw ajax.

Route::get('/exam_manage', 'Examcontroller@examshow');
Route::get('/exam_manage_ajax', 'Examcontroller@examshow_ajax');

This is our Exam model

this is our model where exams table data store.

namespace App;

use Illuminate\Database\Eloquent\Model;

class Exam extends Model
{
	protected $tabe = "exams";
  protected $fillable = ['title','category','exam_date','status'];
}

	

Related tutorial links

• laravel search with ajax tutorial