Introduction:
In web development, autocomplete search functionality enhances user experience by providing real-time suggestions as users type into a search field. Laravel, a popular PHP framework, makes implementing autocomplete search easy and efficient. In this tutorial, we’ll walk through the process of building an autocomplete search feature in Laravel 11 using a database.
Prerequisites: Before we dive into the tutorial, make sure you have the following prerequisites installed:
- Laravel 11 or later
- Composer (PHP dependency manager)
- Basic knowledge of PHP and Laravel
Step 1:
Set Up a Laravel Project If you haven’t already, create a new Laravel project using Composer by running the following command in your terminal:
composer create-project --prefer-dist laravel/laravel autocomplete-search-example
Step 2:
Database Setup Next, set up your database and create a table for the data you want to search. For this example, let’s assume we have a table named “products” with a column called “name” that we want to search through.
Step 3:
Create a Model In Laravel, models are used to interact with the database. Create a model for your “products” table by running the following Artisan command:
php artisan make:model Product
Step 4:
Define Routes Open your routes/web.php file and define a route for the autocomplete search functionality:
use App\Http\Controllers\ProductController;
Route::get('/autocomplete', [ProductController::class, 'autocomplete']);
Step 5:
Create Controller Generate a controller named ProductController using Artisan:
php artisan make:controller ProductController
Step 6:
Implement Autocomplete Logic In your ProductController, define a method named autocomplete to handle the autocomplete search logic:
use App\Models\Product;
class ProductController extends Controller
{
public function autocomplete(Request $request)
{
$search = $request->get('term');
$products = Product::where('name', 'like', '%' . $search . '%')->pluck('name');
return response()->json($products);
}
}
Step 7:
Create View Create a view file named autocomplete.blade.php where you will implement the autocomplete search field:
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Search</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<div style="width: 500px; margin: 0 auto; padding: 50px;">
<h2>Autocomplete Search</h2>
<select class="js-example-basic-single" style="width:100%">
<option value=""></option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2({
placeholder: 'Search for a product',
ajax: {
url: '/autocomplete',
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: data
};
},
cache: true
}
});
});
</script>
</body>
</html>
Step 8:
Test Your Application Finally, test your autocomplete search functionality by serving your Laravel application and accessing the /autocomplete route in your browser.
Conclusion:
Congratulations! You’ve successfully implemented autocomplete search functionality in Laravel 11 using data from a database. Autocomplete search enhances user experience by providing real-time suggestions as users type, improving the overall usability of your web application. Feel free to customize and expand upon this example to suit your specific project requirements.
- Check our tools small Tools
- Check our tools website Word count
