الإكتمال التلقائي للبحث من قاعدة البيانات في لارافيل و ajax
2024-10-31
وقت القراءه : 3 دقائق
واحدة من الإمور التي لا يخلو منها أي تطبيق يتم برمجته، هي خاصية الإكتمال التلقائي عند البحث، في هذا المقالة سيتم شرح ذلك بشكل مبسط بالإعتماد على Jquery.
إنشاء route لعرض صفحة Form البحث
Route::get('/users',[UserController::class,'index']);إنشاء دالة index بداخل UserController
public function index(){
return view('users');
}
إنشاء صفحة users وبناء Form البحث
<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
إضافة مكتبات جافا سكربت ومكتبات CSS.
<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>
كتابة كود ajax
<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>- هنا نستخدم text field id وهو يساوي name، ومن ثم نستخدم الدالة autocomplete ومن ثم نرسل البيانات من خلال ajax ونستقبلها على شكل json.
- تحديد route وإرسال البيانات من خلال term.
- maxLength تم تحديدها بـ 2 وذلك يعني أنه يتم البحث عندما يتم كتابة حرفين في حقل البحث name.
- في حال وجود كلمات متطابقة إن يتم عمل map لها والوصول إلى name.
إنشاء route لفورم البحث
Route::get('/autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');إنشاء دالة autocomplete بداخل UserController class
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);
}
}وبذلك نكون قد إنتهينا من بناء فورم الإكتمال التلقائي للبحث
صفحة html بالكامل
<!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>