Hi Guys,
Today,I will learn you how to create autocomplete search using typeahead js in laravel 8. We will show example of laravel 8 autocomplete search using typeahead js. We will share with you how to build search autocomplete box using jQuery typehead js with ajax in laravel 8.i will use jQuery typehead js plugin, bootstrap library and ajax to search autocomplete in laravel 8 app.
Here, I will give you full example for Laravel 8 ajax autocomplete search using typeahead js as bellow.
Step 1: Install Laravel 8 Applicationwe are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:
Step 2: Database Configuration
composer create-project --prefer-dist laravel/laravel Laravel8TypeheadTutorial
In this step, configure database with your downloded/installed laravel 8 app. So, you need to find .env file and setup database details as following:
Step 3: Add Dummy Record
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password
In this step,I will Generate dummy records into database table users. So, navigate database/seeders/ directory and open DatabaseSeeder.php file. Then add the following two line of code it.
use App\Models\User;
User::factory(100)->create();
After that, open command prompt and navigate to your project by using the following command:
cd / Laravel8TypeheadTutorial
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Next, run the following database seeder command to generate dummy data into database:
Step 4: Create Routes
php artisan db:seed --force
Now in this step, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
Step 5: Creating Auto Complete Search Controller
use App\Http\Controllers\AutocompleteSearchController;
Route::get('/autocomplete-search', [AutocompleteSearchController::class, 'index'])->name('autocomplete.search.index');
Route::get('/autocomplete-search-query', [AutocompleteSearchController::class, 'query'])->name('autocomplete.search.query');
Here in this step,I will create search AutocompleteSearch controller by using the following command.
php artisan make:controller AutocompleteSearchController
The above command will create AutocompleteSearchController.php file, which is located inside
Laravel8TypeheadTutorial/app/Http/Controllers/ directory.Then add the following controller methods into AutocompleteSearchController.blade.php file:
Step 6: Create Blade File
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class AutocompleteSearchController extends Controller
{
public function index()
{
return view('autocompleteSearch');
}
public function query(Request $request)
{
$input = $request->all();
$data = User::select("name")
->where("name","LIKE","%{$input['query']}%")
->get();
return response()->json($data);
}
}
In step 6, create new blade view file that named autocompleteSearch.blade.php inside resources/views directory for ajax get data from database.
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Search Using Typehead | Laravel 8</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 mt-5">
<h5>Laravel 8 Autocomplete Search Using Typehead</h5>
<input type="text" class="form-control typeahead">
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" ></script>
<script type="text/javascript">
var path = "{{ url('autocomplete-search-query') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
</html>
Now we are ready to run our laravel 8 autocomplete search using typeahead js example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/autocomplete-search
It will help you..
Comments