Ajax Live Search Table Generation using Laravel
In this post we will show you Ajax Live Search Table Generation using Laravel, hear for Ajax Live Search Table Generation using Laravel we will give you demo and example for implement.
In this post, we will demonstrate to make an Ajax Live Search Table Generation using Laravel. The table will produce progressively and give comes about in light of client contribution to the inquiry box. We actualize this in Laravel by utilizing 2 see pages, one view contains the inquiry box and different perspectives will show produced table. We likewise utilize some straightforward jquery codes in this instructional exercise.
Now let’s start coding,
Javascript Code in searchlive.blade.php
<script>
$(document).ready(function(){
$("#searchtxt").keyup(function(){
var str= $("#searchtxt").val();
if(str == "") {
$( "#Hintdate" ).html("<b>Blogs information will be show here...</b>");
}else {
$.get( "{{ url('demos/searchLive?id=') }}"+str, function( data ) {
$( "#Hintdate" ).html( data );
});
}
});
});
</script>
At the point when the client sorts something in the inquiry box the keyup work is activated which thus trigger ajax get ask. The pursuit box esteem is submitted to above URL as an id. The reaction from server is then annexed to a div holder.
The complete code of searchlive.blade.php (view page 1)
@extends('main')
@section('title','Ajax Live Search Table Generation using Laravel')
@section('content')
<!-- search box container starts -->
<div class="search">
<h3 class="text-center title-color">Ajax Live Search Table Generation using Laravel</h3>
<p>Demo for Ajax Live Search Table Generation using Laravel. it will show you detail using ajax serch.</p>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="input-group">
<span class="input-group-addon" style="color: white; background-color: rgb(125,78,254);">SEARCH BLOG</span>
<input type="text" autocomplete="off" id="searchtxt" class=" searchtxt form-control input-lg" placeholder="Enter Blog Title">
</div>
</div>
</div>
</div>
<!-- search box container ends -->
<div id="Hintdate" class="title-color Hintdate " style="padding-top:50px; text-align:center;" ><b>Blogs information will be listed here...</b></div>
@stop
@section('scripts')
<script>
$(document).ready(function(){
$("#searchtxt").keyup(function(){
var str= $("#searchtxt").val();
if(str == "") {
$( "#Hintdate" ).html("<b>Blogs information will be listed here...</b>");
}else {
$.get( "{{ url('demos/searchlive?id=') }}"+str, function( data ) {
$( "#Hintdate" ).html( data );
});
}
});
});
</script>
@stop
Presently as said above we have to make another view page that will produce the table. This view page will be annexed to div compartment with id Hintdate when ajax is activated by client input.
The complete code of searchLiveajax.blade.php (view page 2)
<?php
if(!empty($posts_data ))
{
$set_count = 1;
$output_head = '';
$output_body = '';
$output_footer ='';
$output_head .= '<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Created At</th>
<th>Body</th>
<th>Options</th>
</tr>
</thead>
<tbody>
';
foreach ($posts_data as $post_val)
{
$set_body = substr(strip_tags($post->body),0,45)."....";
$show_title = url('blog/'.$post_val->slug);
$output_body .= '<tr>
<td>'.$set_count++.'</td>
<td>'.$post_val->title.'</td>
<td>'.$post_val->created_at.'</td>
<td>'.$set_body.'</td>
<td><a href="'.$show_title.'" target="_blank" title="SHOW" ><span class="search glyphicon glyphicon-list"></span></a></td>
</tr>';
}
$output_footer .= '
</tbody>
</table>
</div>';
echo $output_head;
echo $output_body;
echo $output_footer;
}
else
{
echo 'We Not Found Any Data.';
}
?>
The above view page is only used to echo the server response Table to the client.
The code for routes/web.php
Route::get('demos/searchLive','SearchController@searchLive');
The complete code of SearchController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class SearchController extends Controller
{
public function searchlive(Request $request_val)
{
$search_val = $request_val->id;
if (is_null($search_val))
{
return view('demos.searchlive');
}
else
{
$posts_data = Post::where('title','LIKE',"%{$search_val}%")->get();
return view('demos.searchLiveajax')->withPosts($posts_data);
}
}
}
As should be obvious that if look box esteem is invalid then searchlive.blade.php see page is stacked and when seek box esteem is given then searchLiveajaxdemo.blade.php see page is returned. Note I utilize Laravel Eloquent ORM rather than ordinary question manufacturer yet it is totally your decision. Likewise, take note of that both view pages are in demos organizer. I utilize dab administrator rather than cut which is additionally totally your decision.
The code for Post Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
// Post class
class Post extends Model{
}
Hope this code and post will helped you for implement Ajax Live Search Table Generation using Laravel. 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
Reference @ shareurcodes.com