DB_CONNECTION=mysql\n\nDB_HOST=127.0.0.1\n\nDB_PORT=3306\n\nDB_DATABASE=your_database_name\n\nDB_USERNAME=your_database_username\n\nDB_PASSWORD=your_database_password<\/code><\/pre>\n\n\n\nMake sure to replace your_database_name, your_database_username, and your_database_password with the actual details of your database. After updating the credentials, you\u2019re ready to create the products table.<\/p>\n\n\n\n
Step 3: Create the Migration<\/h2>\n\n\n\n
Next, we\u2019ll create a migration for the products table. Open your terminal and run the following command:<\/p>\n\n\n\n
php artisan make:migration create_products_table –create=products<\/p>\n\n\n\n
This command will create a new migration file in the database\/migrations\/ directory. Open the file and update the up() method to define the structure of the products table like this:<\/p>\n\n\n\n
public function up()\n\n{\n\n\u00a0\u00a0\u00a0\u00a0Schema::create('products', function (Blueprint $table) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->id(); \/\/ Auto-incrementing primary key\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('name'); \/\/ Name of the product\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('description'); \/\/ Product description\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->integer('price'); \/\/ Product price\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->timestamps(); \/\/ Timestamps for created_at and updated_at\n\n\u00a0\u00a0\u00a0\u00a0});\n\n}<\/code><\/pre>\n\n\n\nThis schema defines a simple products table with auto-incrementing IDs, names, descriptions, prices, and timestamps.<\/p>\n\n\n\n
After updating the migration file, run the following command to apply the migration and create the table:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\nYour database now has the products table created. The next step is to add some sample data to the table, which you can do by either seeding the table or manually inserting data directly into the database.<\/p>\n\n\n\n
Step 4: Create the Controller<\/h2>\n\n\n\n
Now that our database table is set up let’s create a controller to handle the search functionality. Open your terminal and run the following command to generate a new controller:<\/p>\n\n\n\n
php artisan make:controller SearchController<\/code><\/pre>\n\n\n\nThen, open the app\/Http\/Controllers\/SearchController.php file and add the following code:<\/p>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nuse DB;\n\nclass SearchController extends Controller\n\n{\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Function to return the search view\n\n\u00a0\u00a0\u00a0\u00a0public function index()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return view('search.index');\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Function to handle AJAX search requests\n\n\u00a0\u00a0\u00a0\u00a0public function search(Request $request)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($request->ajax())\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$output = '';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$products = DB::table('products')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->where('name', 'LIKE', '%' . $request->search . '%')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->get();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($products->count() > 0)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($products as $product) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$output .= '\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td>' . $product->name . '<\/td>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td>' . $product->description . '<\/td>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td>' . $product->price . '<\/td>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response($output);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response('<tr><td colspan=\"3\">No products found<\/td><\/tr>');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}<\/code><\/pre>\n\n\n\nExplanation:<\/strong><\/p>\n\n\n\n\n- The index()<\/strong> method returns the view where the search box will be displayed.<\/li>\n\n\n\n
- The search()<\/strong> method handles the AJAX request. It searches the database for products based on the user’s name and returns the results dynamically.<\/li>\n<\/ul>\n\n\n\n
Key Points:<\/strong><\/p>\n\n\n\n\n- The search() method listens for an AJAX request, performs a database search, and returns the results as HTML rows.<\/li>\n\n\n\n
- If no products match the search, it returns a message saying, “No products found.”<\/li>\n<\/ul>\n\n\n\n
With this controller in place, you can handle the AJAX search functionality. Next, we\u2019ll create the view to display the search box and results.<\/p>\n\n\n\n
Step 5: Create the View<\/h2>\n\n\n\n
Now that we have set up the controller, we must create the view to display the search box and the results.<\/p>\n\n\n\n
First, navigate to the resources\/views\/ directory and create a folder named search (if it doesn’t exist). Inside the search folder, create a file called index.blade.php and add the following HTML code:<\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html>\n\n<head>\n\n\u00a0\u00a0\u00a0\u00a0<meta name=\"_token\" content=\"{{ csrf_token() }}\">\n\n\u00a0\u00a0\u00a0\u00a0<title>Live Search with Laravel<\/title>\n\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\">\n\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\n<\/head>\n\n<body>\n\n\u00a0\u00a0\u00a0\u00a0<div class=\"container\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"my-4\">Live Search Products<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"search\" placeholder=\"Search products...\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<table class=\"table table-bordered mt-3\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<thead>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Name<\/th>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Description<\/th>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Price<\/th>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/thead>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tbody>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Results will be injected here -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tbody>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/table>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document).ready(function(){\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#search').on('keyup', function(){\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var query = $(this).val();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'get',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: '{{ URL::to('search') }}',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: {'search': query},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function(data){\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('tbody').html(data);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0<\/script>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\nExplanation:<\/strong><\/p>\n\n\n\n\n- The #search input field captures what the user types in the search box.<\/li>\n\n\n\n
- The keyup event listens for each key press and sends an AJAX request to search for matching products.<\/li>\n\n\n\n
- The query is sent to the search function in the controller, which returns the matching results.<\/li>\n\n\n\n
- The results are displayed in the table as HTML rows.<\/li>\n<\/ul>\n\n\n\n
Key Points:<\/strong><\/p>\n\n\n\n\n- The search field updates the results instantly as you type.<\/li>\n\n\n\n
- The table will show product names, descriptions, and prices based on the search query.<\/li>\n\n\n\n
- The AJAX script uses the CSRF token to ensure the request is secure.<\/li>\n<\/ul>\n\n\n\n
With this view in place, the live search feature is now connected to the controller, and the search results will be displayed in real-time. Next, you can test the search functionality!<\/p>\n\n\n\n
Step 6: Set Up Routes<\/h2>\n\n\n\n
To enable the search functionality, we must define two routes to display the search page and handle the search request.<\/p>\n\n\n\n
Open the routes\/web.php file and add these routes:<\/p>\n\n\n\n
Route::get('\/', [SearchController::class, 'index']);\n\nRoute::get('\/search', [SearchController::class, 'search']);<\/code><\/pre>\n\n\n\nExplanation:<\/strong><\/p>\n\n\n\n\n- The first route loads the main page, where the search box is displayed, by calling the index() method in the SearchController.<\/li>\n\n\n\n
- The second route handles the AJAX requests when the user types in the search box. It calls the search() method in the SearchController to fetch the search results.<\/li>\n<\/ul>\n\n\n\n
Once these routes are set up, your application can display the search page and return live search results.<\/p>\n\n\n\n
Step 7: Testing the Live Search<\/h2>\n\n\n\n
Now that everything is set up let’s test the live search functionality.<\/p>\n\n\n\n
\n- First, start the Laravel development server by running this command in your terminal:<\/li>\n<\/ol>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\n\n- Open your browser and go to http:\/\/127.0.0.1:8000 (or the appropriate URL if you use a different server).<\/li>\n\n\n\n
- On the page, you should see the search box.<\/li>\n\n\n\n
- Start typing in the search box. As you type, the search results will update automatically based on the products in your database.<\/li>\n<\/ol>\n\n\n\n
For example, if you type the letter “W”, the results will change to show products with names that contain “W”.<\/p>\n\n\n\n
If everything works as expected, you’ve successfully set up the live search feature using AJAX and jQuery in Laravel!<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In this tutorial, we’ve successfully created a live search feature in Laravel 10 using AJAX and jQuery. This method improves the user experience by showing instant search results without reloading the page. Adding live search to your Laravel applications can make them more interactive, whether you’re building a blog, an eCommerce site, or any other data-driven platform. Following this guide, you can add a fast and efficient search feature that keeps users engaged and happy with your application.<\/p>\n","protected":false},"excerpt":{"rendered":"
In today’s busy world, users expect quick and smooth responses when using web applications. Adding a live search feature can significantly improve the user experience by showing results in real-time as they type. This is especially helpful for applications with large amounts of data, where users might find it challenging to locate what they need […]<\/p>\n","protected":false},"author":5,"featured_media":69525,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[50],"ad-banner":[86],"blog-popup":[81],"cta-banner":[],"class_list":["post-66932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-laravel-development","ad-banner-laravel","blog-popup-app-laravel"],"acf":[],"_links":{"self":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts\/66932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/comments?post=66932"}],"version-history":[{"count":2,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts\/66932\/revisions"}],"predecessor-version":[{"id":69528,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts\/66932\/revisions\/69528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/media\/69525"}],"wp:attachment":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/media?parent=66932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/categories?post=66932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/tags?post=66932"},{"taxonomy":"ad-banner","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/ad-banner?post=66932"},{"taxonomy":"blog-popup","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/blog-popup?post=66932"},{"taxonomy":"cta-banner","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/cta-banner?post=66932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}