Laravel 5.3 search bar using jquery Autocomplete:
For set up search bar in Laravel 5.3, we have to do the folloing things:
In your blade file write this code:
Also add jquery library in your code which is mentioned in this code.
<input id="surgeon-name" type="text" class="form-control pd-l-50" placeholder="SEARCH BY SURGEON NAME">
<script src="{{asset('js/jquery-1.12.4.js')}}"></script>
<script src="{{asset('js/jquery-ui.js')}}"></script>
<script>
(function () {
src = "/prefcard/maker-search-surgeon";
$("#surgeon-name").autocomplete({
source: function (request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
min_length: 3,
select: function (event, ui)
{
// console.log(ui.item.value);return false;
var test = ui.item.value ? ui.item.value : '';
if (test != '')
{
var url = '/prefcard/maker-search-surgeon';
var formAutocomplete = $('<form action="' + url + '" method="post">' +
'<input type="hidden" name="_token" value="{{ csrf_token() }}">' +
'<input type="text" name="term" value="' + ui.item.value + '" />' +
'</form>');
$('body').append(formAutocomplete);
formAutocomplete.submit();
}
}
});
})();
</script>
In your routes file write this code
Route::get('maker-search-surgeon', 'SearchController@searchSurgeon');
Route::post('maker-search-surgeon', 'SearchController@postSearchSurgeon');
In your SearchController create two method
public function searchSurgeon(Request $request) {
$query = $request->get('term', '');
$results = DB::table('surgeon')
->where('firstname', 'LIKE', '%' . $query . '%')
->orWhere('lastname', 'LIKE', '%' . $query . '%')
->take(5)->get();
$data = array();
foreach ($results as $result) {
$data[] = array('value' => $result->firstname . ' ' . $result->lastname, 'id' => $result->id);
}
if (count($data))
return $data;
else
return ['value' => 'No Result Found', 'id' => ''];
}
public function postSearchSurgeon(Request $request) {
//Do whatever you want to search accordingly name and then return
return view('dashboard')->with('surgeon', $surgeon);
}
Thanks
For set up search bar in Laravel 5.3, we have to do the folloing things:
In your blade file write this code:
Also add jquery library in your code which is mentioned in this code.
<input id="surgeon-name" type="text" class="form-control pd-l-50" placeholder="SEARCH BY SURGEON NAME">
<script src="{{asset('js/jquery-1.12.4.js')}}"></script>
<script src="{{asset('js/jquery-ui.js')}}"></script>
<script>
(function () {
src = "/prefcard/maker-search-surgeon";
$("#surgeon-name").autocomplete({
source: function (request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
min_length: 3,
select: function (event, ui)
{
// console.log(ui.item.value);return false;
var test = ui.item.value ? ui.item.value : '';
if (test != '')
{
var url = '/prefcard/maker-search-surgeon';
var formAutocomplete = $('<form action="' + url + '" method="post">' +
'<input type="hidden" name="_token" value="{{ csrf_token() }}">' +
'<input type="text" name="term" value="' + ui.item.value + '" />' +
'</form>');
$('body').append(formAutocomplete);
formAutocomplete.submit();
}
}
});
})();
</script>
In your routes file write this code
Route::get('maker-search-surgeon', 'SearchController@searchSurgeon');
Route::post('maker-search-surgeon', 'SearchController@postSearchSurgeon');
In your SearchController create two method
public function searchSurgeon(Request $request) {
$query = $request->get('term', '');
$results = DB::table('surgeon')
->where('firstname', 'LIKE', '%' . $query . '%')
->orWhere('lastname', 'LIKE', '%' . $query . '%')
->take(5)->get();
$data = array();
foreach ($results as $result) {
$data[] = array('value' => $result->firstname . ' ' . $result->lastname, 'id' => $result->id);
}
if (count($data))
return $data;
else
return ['value' => 'No Result Found', 'id' => ''];
}
public function postSearchSurgeon(Request $request) {
//Do whatever you want to search accordingly name and then return
return view('dashboard')->with('surgeon', $surgeon);
}
Thanks
Hey Nice write uo, keep Writing, Do you know you can also post your laravel related articles
ReplyDeleteon http://www.laravelinterviewquestions.com/submit-an-article too.
Thanks !
Add Ajax and live search function in Laravel search bar and you have got a working search engine like Google. This tutorial guides you on creating live search bar in laravel: https://www.cloudways.com/blog/live-search-laravel-ajax/
ReplyDeleteHi,
ReplyDeleteuseful info,
Providing Laravel Web Developmentl shopping cart, Website Designing and Payment gateway integration.
Ecommerce Website Development
Online Business Website Development
Ecommerce Portal Development
For more details about my Web Development and Laravel Web Development Services.
We are a specialized Laravel Development Company, which offers the best travel Website & Application Services. We assure effective and quality work . +91-9806724185 or Contact@expresstechsoftwares.com
ReplyDelete