I would highly appreciate if someone can explain me step by step the logic behind the code,in particular the ajax part. The code does work , but I do not quite understand all the details.
My route:
Route::get('api/search', 'ApiSearchController@index');
My view:
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search" autocomplete="off">
<div class="form-group" style="width: 240px;">
<input type="search" id="searchbox" name="search" placeholder="Search products or categories..." class="form-control" style="min-width: 240px;"></input>
</div>
<div style="position: absolute;margin: 0 auto;padding: 5px; ">
<div class="search-info"></div>
</div>
</form>
</li>
</ul>
My Controller:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
use App\Categorie;
use DB;
use Illuminate\Support\Facades\Input;
class ApiSearchController extends MainController {
public function index()
{
$input = Input::all();
$query = $input['search'];
if(!$query && $query == '') return response()->json(array(), 400);
$products2 = DB::table('products')
->join('categories', 'products.categorie_id', '=', 'categories.id')
->select('products.*', 'categories.id as idcat', 'categories.url as urlcat')
->where('products.title', 'like', "%$query%")
->orwhere('products.url', 'like', "%$query%")
->take(5)
->get()
->toArray();
return response()->json(
$products2);
}
}
My Script:
$(document).ready(function () {
$('#searchbox').keyup(function () {
var userText = $.trim($(this).val());
$.ajax({
url: root+'/api/search',// var root = '{{url("/")}}';
type: "GET",
dataType: "json",
contentType: "application/x-www-form-urlencoded;charset=utf-8",
data: {search: userText},
success: function (response) {
if (response) {
var autoList = '<ul class="srechajax">';
$.each(response, function (key, val) {
autoList += ' <li class="hovers">';
autoList += ' <a href="'+root +'/shop/'+ val.urlcat +'/'+val.url+'"><img src="'+ root + '/images/' + val.image + '"><div>' + val.title + '</div></a>';
autoList += ' </li>';
});
autoList += '</ul>';
$('div.search-info').html(autoList).fadeIn(500);
} else {
$('div.search-info').fadeOut(500);
}
}
});
});
$('#searchbox').focusout(function () {
if (!$('div.search-info').is(":hover")) {
$('div.search-info').fadeOut(200);
}
});
});
I would highly appreciate if someone can explain me step by step the logic behind the code,in particular the ajax part. The code does work , but I do not quite understand all the details.
this trigger a function when searchbox get typed : $('#searchbox').keyup(function () {
set value of the searchbox to variable usertext :
var userText = $.trim($(this).val());
set params for ajax request :
url: root+'/api/search',// var root = '{{url("/")}}'; type: "GET", dataType: "json", contentType: "application/x-www-form-urlencoded;charset=utf-8", data: {search: userText},
send response to ajax as a json dataType with value of product table :
return response()->json($products2);
run a function if success and set data of products2 into variable response :
success: function (response) {
this set the value of the response into html :
var autoList = '<ul class="srechajax">';
$.each(response, function (key, val) {
autoList += ' <li class="hovers">';
autoList += ' <a href="'+root +'/shop/'+ val.urlcat +'/'+val.url+'">
<img src="'+ root + '/images/' + val.image + '"><div>' + val.title +
'</div></a>';
autoList += ' </li>';
});
autoList += '</ul>';
$('div.search-info').html(autoList).fadeIn(500);