Laravel 8 autocomplete search using Typehead JS from MySQL database example; this tutorial will guide you step by step how to implement autocomplete search with Database in laravel 8 app with jquery typeahead js.
Typehead js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads. The typeahead. js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query.
And as well as using this tutorial, you can implement autocomplete search using jquery typeahead js in laravel apps from database.
Build Autocomplete Search in Laravel 8 with Typeahead Js
- Step 1 – Install Laravel 8 App
- Step 2 – Connecting App to Database
- Step 3 – Generate Fake Records
- Step 4 – Add Routes
- Step 5 – Create Controller & Methods
- Step 6 – Create Blade View
- Step 7 – Start Development Server
- Step 8 – Test This App
Step 1 – Install Laravel 8 App
Now, execute the following command on terminal to download laravel 8 app:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App to Database
After successfully install laravel Application, Go to your project .env file and set up database credential and move next step :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Step 3 – Generate Fake Records
Before add fake records in database first migrate the table in database using the below command :
php artisan migrate
Add fake records in our database. use the below command and add 100 fake records in database :
php artisan tinker
factory(App\User::class, 100)->create();
Step 4 – Add Routes
Now create two routes one for show search input box and second for autocomplete search using jquery typeahead js autocomplete method :
use App\Http\Controllers\AutoCompleteController;
Route::get('search', [AutoCompleteController::class, 'index']);
Route::get('autocomplete', [AutoCompleteController::class, 'search']);
Step 5 – Create Controller & Methods
Execute the following command on terminal to create a controller name AutoCompleteController.php file:
php artisan make:controller AutoCompleteController
After successfully create controller go to app/controllers/AutoCompleteController.php and put the below code :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class AutoCompleteController extends Controller
{
public function index()
{
return view('search');
}
public function search(Request $request)
{
$search = $request->get('term');
$result = User::where('name', 'LIKE', '%'. $search. '%')->get();
return response()->json($result);
}
}
Step 6 – Create Blade View
In this step, create blade view file. Go to app/resources/views and create one file name search.blade.php .
After create blade file put the below html code here with typehead js and css library file :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Autocomplete Search Using Typeahead JS - Tutsmake.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<style>
.container{
padding: 10%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12"><h2>Laravel AutoComplete Search Using Typeahead JS</h2></div>
<div class="col-12">
<div id="custom-search-input">
<div class="input-group">
<input id="search" name="search" type="text" class="form-control" placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var route = "{{ url('autocomplete') }}";
$('#search').typeahead({
source: function (term, process) {
return $.get(route, { term: term }, function (data) {
return process(data);
});
}
});
</script>
</body>
</html>
And put some script code in search.blade.php file. The script code will work to search a data from database and return data to our view file this ajax method full field over autocomplete search example.
Step 7 – Start Development Server
Execute the following command on termial to start development server:
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Step 8 – Test This App
Open broswer and hit the following url on it:
Http://localhost:8000/search
Conclusion
In this tutorial , You have leaned successfully how to implemented autocomplete search in laravel 8 application using typeahead js. our examples run quickly.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
