If you are searching for given topics such as laravel typeahead js autocomplete search text box, typeahead js autocomplete example, laravel autocomplete search with typeahead js, laravel dropdown autocomplete typeahead js, ajax autocomplete text, ajax autocomplete search in laravel with typeahead js, typeahead js search operation in laravel, etc. this tutorial is for you.
Whenever we are creating a web application in Laravel, many times we need to create a functionality that can fetch data from mysql database without refreshing or reloading the whole web page and show it to the user.
In this tutorial we will create a web application in larva using typeahead js. The web application in which a form will be created, the form from which the user will fetch data from the database without searching and refresh the page.
In this laravel tutorial, you will learn how to create autocomplete textbox, input box search functionality in laravel web applications using the jQuery UI.
Laravel Autocomplete Search Using typeahead js Example
- Install Laravel Application
- Configure Database Detail
- Run Migration
- Generate Fake Data in Table
- Create Routes
- Generate Controller By Artisan
- Create Blade View
- Start Development Server
Install Laravel Application
First Step, you need to download or install laravel web application new setup on your local machine. you can use the following command to download or install laravel application new setup:
composer create-project laravel/laravel laravel-autocomplete-search –-prefer-dist
If you want to install a specific version of laravel, you can follow the following tutorial
https://w3alert.com/laravel-tutorial/laravel-install-on-windows-ubuntu-with-composer
Configure Database Detail
After that, you will set up the database credentials in .env file. So open your .env file and update database credentials following:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=root
Run Migration
Before you will run php artisan migrate command. Go to app/providers/AppServiceProvider.php and update the below code :
..
use Illuminate\Support\Facades\Schema;
....
function boot()
{
Schema::defaultStringLength(191);
}
...
Next, go to command prompt and run the following command:
php artisan migrate
OR
php artisan migrate:fresh
This php artisan migrate command creates a table in your database.
Generate Fake data in Table
Next, we need to generate fake data into the MySQL database table by using php artisan command. So go to your command prompt (cli) and then go to your project root directory. After that run the following command:
php artisan tinker
After run the php artisan tinker. Use the following command. This command will add 200 fake data in your MySQL database table users:
>>> factory(App\User::class, 200)->create();
Create Routes
Next step, go to routes/web.php file and update the following routes into your file:
//display users list
Route::get('query', '[email protected]');
Route::get('autocomplete', '[email protected]');
Generate Controller By Artisan
Now, you need to generate or create a controller file using php artisan command, so use the php artisan make:controller command and generate/create a new controller file:
php artisan make:controller AutoCompleteSearchController
We will create two methods in this controller file. This method will also show the search form and complete search from the database in laravel web applications.
After that, go to App/Http/Controllers/ directory and find the created AutoCompleteSearchController file and update the following code into your file:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class AutoCompleteSearchController extends Controller
{
public function index()
{
return view('search-page');
}
public function autocomplete(Request $request)
{
$search = $request->get('term');
$result = User::where('name', 'LIKE', '%'. $search. '%')->get();
return response()->json($result);
}
}
Create Blade Views
Next, you need to create a blade views file, so go resource/views directory and create the following blade views file.
You need to include the following typehead js JavaScript library in the form below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
Go to resource/views/ then create a new file name search-page.blade.php and update the following code:
<!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>Laravel Autocomplete Search Using Typeahead JS - w3alert.com</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.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 mt-5">
<div class="row">
<div class="col-12 text-center"><h2>Laravel Autocomplete Search Using Typeahead JS - w3alert.com</h2></div>
<div class="col-12 text-center">
<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>
Start development server
You can use the following command artisan command to start the development server:
php artisan serve
The final step, go to your browser and type the below-given URL into your browser:
http://localhost:8000/query
OR
http://localhost/laravel-autocomplete-search/public/query
Reference
This tutorial idea has taken from this https://www.tutsmake.com/laravel-7-6-autocomplete-search-using-typeahead-js-example/