Laravel 10 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 10 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 10 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 10 App
First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App to Database
In this step, Configure your database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:
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 tinkerfactory(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 serveIf 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 10 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.
