Html code:
<div class="col-lg-8"><input id="searchInput" type="search" class="form-control" placeholder="Search doctors here"></div><div class="col-lg-12 pt-5"><div class="row" id="doctorsContainer"></div></div>Ajax Code :
$(document).ready(function () { function fetchDoctorsData() { $.ajax({ url: "{{ url('get_doctor') }}", type: 'GET', dataType: 'json', success: function (response) { console.log(response); displayDoctors(response.data); }, error: function (xhr, status, error) { console.error(xhr.responseText); }, }); } function displayDoctors(doctors) { var doctorsHtml = ''; if (doctors && doctors.length > 0) { doctors.forEach(function (doctor) { var doctorHtml = `<div class="col-lg-4"><div class="card"><div class="card-body"><div class="row"><div class="col-lg-4"><img src="{{ asset('/uploads/doctor/') }}/${doctor.doctor_image}" alt="user-avatar" class="img-fluid rounded" /></div><div class="col-lg-8"><h6 class="text-muted text-uppercase"><i class="fa-solid fa-shield-halved"></i> ${doctor.doctor_speciality}</h6><p class="text-muted"><span class="badge bg-${doctor.doctor_status == 0 ? 'danger' : 'success'} rounded"><i class="fa-solid fa-bolt" style="color: #ffff;"></i> ${doctor.doctor_status == 0 ? 'InActive' : 'Active'}</span></p></div><div class="text-center pt-4"><p class="docname">${doctor.doctor_prefix}.${doctor.doctor_name}</p></div><div class="d-flex justify-content-around gap-4"><a href="tel:${doctor.doctor_phone}" class="btn btn-link text-decoration-none" data-bs-toggle="tooltip" title="${doctor.doctor_phone}"><i class="fas fa-phone fa-xl"></i></a><a href="mailto:${doctor.doctor_email}" class="btn btn-link text-decoration-none" data-bs-toggle="tooltip" title="${doctor.doctor_email}"><i class="fas fa-envelope fa-xl"></i></a></div><div class="pt-2"></div><button class="btn btn-primary w-100">View Details</button></div></div></div></div>`; doctorsHtml += doctorHtml; }); } else { doctorsHtml = '<p>No doctors found.</p>'; } $('#doctorsContainer').html(doctorsHtml); } fetchDoctorsData(); $('#searchInput').on('input', function () { var query = $(this).val().trim(); if (query.length >= 3) { searchDoctors(query); } else { fetchDoctorsData(); } }); function searchDoctors(query) { $.ajax({ url: "{{ url('search') }}", type: 'GET', dataType: 'json', data: { query: query }, success: function (response) { displayDoctors(response.data); }, error: function (xhr, status, error) { console.error(xhr.responseText); }, }); }});The issue arises when I input a search query into the #searchInput field. Although the AJAX request is sent to the server and the response data is logged to the console, the search results are not being displayed in the #doctorsContainer div.
Controller :
public function search(Request $request){ $id = Session::get('USERID'); $clientId = Crypt::decrypt($id); $keyword = $request->input('query'); Log::info('Search keyword: ' . $keyword); $doctors = Doctor::where('client_id', $clientId) ->where(function ($query) use ($keyword) { $query->where('doctor_name', 'like', '%' . $keyword . '%'); }) ->get(); return response()->json(['doctors' => $doctors]);}I've ensured that the server-side logic for fetching search results is functioning correctly and returning the expected JSON response with the matching doctors.
Any insights or suggestions on how to troubleshoot and resolve this issue would be greatly appreciated. Thank you!