11-Apr-2023
.
Admin
Hi Guys,
In this Example,I will learn you how to use autocomplete search with jquery ui in laravel.you can easy and simply use autocomplete serach with jquery ui in laravel.
you can add to text search box then related text to get in your datatable.I show how you add jQuery UI autocomplete to the input field in the Laravel project.
Step 1: Install Laravel 7
In first step,you can install laravel application.So run bellow command and get clean fresh laravel 7 application.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Setup Database
After successfully install laravel 6 Application, Go to your project .env file and set up database credential and move next step :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name
DB_USERNAME=here database username
DB_PASSWORD=here database password
Step 3: Make Route
you can create to route in web.php file.
routes/web.php
Route::get('/autocomplete','AutoComplateController@index');
Route::post('/autocomplete/getAutocomplete/','AutoComplateController@getAutocomplete')->name('Autocomplte.getAutocomplte');
Step 4: Create Controller
you need to create a controller name AutoComplateController.this command use to your terminal.
app/Http/Controllers/AutoComplateController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class AutoComplateController extends Controller
{
public function index(){
return view('autocomplate');
}
public function getAutocomplete(Request $request){
$search = $request->search;
if($search == ''){
$autocomplate = User::orderby('name','asc')->select('id','name')->limit(5)->get();
}else{
$autocomplate = User::orderby('name','asc')->select('id','name')->where('name', 'like', '%' .$search . '%')->limit(5)->get();
}
$response = array();
foreach($autocomplate as $autocomplate){
$response[] = array("value"=>$autocomplate->id,"label"=>$autocomplate->name);
}
echo json_encode($response);
exit;
}
}
Step 5: Create View File
In this step you need to create blade view file.this blade use to layout to getdata reable formate.
resources/views/autocomplate.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Autocomplete Search With Jquery UI Example</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha256-IdfIcUlaMBNtk4Hjt0Y6WMMZyMU0P9PN/pH+DFzKxbI=" crossorigin="anonymous" />
<!-- Script -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-md-10 offset-1 text-center">
<div class="card">
<div class="card-header bg-success text-white">
<h3>Laravel Autocomplete Search With Jquery UI Example - Nicesnippets.com</h3>
</div>
<div class="card-body" style="height: 210px;">
<input type="text" id='employee_search' placeholder="--search--">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// CSRF Token
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function(){
$( "#employee_search" ).autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url:"{{route('Autocomplte.getAutocomplte')}}",
type: 'post',
dataType: "json",
data: {
_token: CSRF_TOKEN,
search: request.term
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
$('#employee_search').val(ui.item.label);
$('#employeeid').val(ui.item.value);
return false;
}
});
});
</script>
</body>
</html>
you can run to laravel project in your teminal.bellow command.
php artisan serve
then run this url your browser:
http://localhost:8000/autocomplete
It will help you....
#Laravel 7
#Jqury UI
#Laravel
#Laravel 6
