Implement AJAX Autocomplete in Laravel 11 with jQuery UI
In modern web development, user experience is key. One of the most effective tools to enhance this experience is to implement the autocomplete feature. In this article, we will explore how to integrate AJAX autocomplete in Laravel 11 using jQuery UI, a method that facilitates real-time searching and improves user interaction with the platform.
What is AJAX Autocomplete?
AJAX autocomplete allows suggestions to be displayed based on data stored on the server as the user types in a search field. This approach not only saves the user time but also guides them towards relevant results, increasing the likelihood of finding what they are looking for more efficiently.
Preparations: Installing Laravel 11
Before starting the implementation of autocomplete, make sure you have Laravel 11 installed. You can install Laravel by following the steps in its official documentation. Once your project is ready, it will be time to move on to configuring jQuery and jQuery UI.
Adding jQuery and jQuery UI
To use jQuery UI in your project, you must first include it. You can do this by adding the following links in the <head> section of your Blade file:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
With these, you will have jQuery and jQuery UI ready for use.
Creating the Database and the Model
Next, you should create a table in your database that stores the data you want to appear in the autocomplete suggestions. For example, let's say you want to implement autocomplete for usernames. Run the following commands in your console:
php artisan make:migration create_users_table --create=users
In the generated migration file, add the necessary fields and then run the command:
php artisan migrate
After this, create a model for the users table:
php artisan make:model User
Creating the Route and the Controller
To handle the autocomplete requests, you will create a route in web.php and a controller. Add the route:
Route::get('/autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');Then, create the controller using the following command and add the autocomplete method:
php artisan make:controller UserController
In the UserController, add the following code:
public function autocomplete(Request $request)
{
$data = User::select("name")
->where("name", "LIKE", "%{$request->input('query')}%")
->get();
return response()->json($data);
}This snippet allows you to search for users whose names match the text entered in the search field.
Implementing the Autocomplete in the View
Finally, in your Blade view, you can use jQuery to implement the autocomplete functionality. Here’s an example of how to do it:
<input type="text" id="search" placeholder="Search user...">
<script>
$(document).ready(function() {
$('#search').on('keyup', function() {
var query = $(this).val();
$.ajax({
url: "{{ route('autocomplete') }}",
type: "GET",
data: {'query': query},
success: function(data) {
var suggestions = [];
data.forEach(function(value) {
suggestions.push(value.name);
});
$('#search').autocomplete({
source: suggestions
});
}
});
});
});
</script>With this code, as you type in the search field, an AJAX request will be sent to bring in user suggestions, which will be displayed in a dropdown menu.
Conclusion
Implementing AJAX autocomplete in Laravel 11 with jQuery UI is a straightforward process that significantly enhances user experience. By following this tutorial, you can provide your users with an effective tool to quickly find information.
I invite you to continue reading more news and tutorials about web development on my blog. There’s always something new to learn!
