واحدة من الإمور التي لا يخلو منها أي تطبيق يتم برمجته، هي خاصية الإكتمال التلقائي عند البحث، في هذا المقالة سيتم شرح ذلك بشكل مبسط بالإعتماد على Jquery.
Route::get('/users',[UserController::class,'index']);
public function index(){ return view('users'); }
<form name="autocomplete-textbox" id="autocomplete-textbox" method="post" action="#"> @csrf <div class="form-group"> <label for="exampleInputEmail1">Search For Users</label> <input type="text" id="name" name="name" class="form-control"> </div> </form>
نلاحظ هنا إنه textField تم إعطاءه id=name حيث إن هذا id هو ما سنتعمل معه في ajax
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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>
<script> $(document).ready(function() { $( "#name" ).autocomplete({ source: function(request, response) { $.ajax({ url: '{{ route('autocomplete') }}', data: { term : request.term }, dataType: "json", success: function(data){ var resp = $.map(data,function(obj){ return obj.name; }); response(resp); } }); }, minLength: 2 }); }); </script>
Route::get('/autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');
class UserController extends Controller { public function index(){ return view('users'); } public function autocomplete(Request $request){ $res = User::select("name") ->where("name","LIKE","%{$request->term}%") ->get(); return response()->json($res); } }
وبذلك نكون قد إنتهينا من بناء فورم الإكتمال التلقائي للبحث
<!DOCTYPE html> <head> <title>Laravel 8 Autocomplete Textbox From Database with jQuery Ajax - Tutsmake.com</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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-4"> <div class="card"> <div class="card-body"> <form name="autocomplete-textbox" id="autocomplete-textbox" method="post" action="#"> @csrf <div class="form-group"> <label for="exampleInputEmail1">Search For Users</label> <input type="text" id="name" name="name" class="form-control"> </div> </form> </div> </div> </div> <script> $(document).ready(function() { $( "#name" ).autocomplete({ source: function(request, response) { $.ajax({ url: '{{ route('autocomplete') }}', data: { term : request.term }, dataType: "json", success: function(data){ var resp = $.map(data,function(obj){ return obj.name; }); response(resp); } }); }, minLength: 2 }); }); </script> </body> </html>