In this article, we will see the laravel 8 autocomplete search from the database. Using ajax autocomplete textbox in laravel 8 we will get records from the database and get them in laravel. when you have more data in your table at a time you can't give a dropdown box because it will take more time to fetch data from the database. So, here we will add autocomplete search using ajax.
So, let's see ajax autocomplete textbox in laravel 7 and laravel 8, dynamic autocomplete in laravel, and autocomplete search in laravel 8 using typeahead.js
Here, we have added the routes method in the route file for this autocomplete search example in laravel.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('/', function () {
return view('welcome');
});
Route::get('search', [UserController::class, 'search']);
Route::get('autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');
Now, we have already created UserController for this example. So, you can create a controller as per your requirement and add the below code to the controller.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use DB;
class UserController extends Controller
{
public function search()
{
return view('user');
}
public function autocomplete(Request $request)
{
$data = User::select("name")
->where("name","LIKE","%{$request->str}%")
->get('query');
return response()->json($data);
}
}
In this step, we will create a user.blade.php file for the output view.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Autocomplete Search from Database - websolutionstuff.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="margin: 30px 0px; text-align: center;">Laravel 8 Autocomplete Search from Database - websolutionstuff.com</h2>
<input class="search form-control" type="text" placeholder="Search here...">
</div>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.search').typeahead({
source: function (str, process)
{
return $.get(path, { str: str }, function (data) {
return process(data);
});
}
});
</script>
</body>
</html>
You might also like:
In this article, we will see how to validate password and confirm password in react js. Sometimes we need to add th...
Sep-14-2022
In this article, we will explore the process of removing foreign key constraints in Laravel 10 migrations. We will delve...
Apr-28-2023
In this article, we will see how to remove the package from laravel. there are different ways to remove packages fr...
Oct-31-2022
Hey there! Today, I'm going to walk you through the process of installing and setting up Elasticsearch on your Ubunt...
Jan-08-2024