How to implement autocomplete search with Database in laravel 5.7 app with jquery typeahead js. In this tutorial, We will share with you how to implement autocomplete search with database using jquery typeahead js example. And this example also work with laravel 5.8 version.
Today we will implement autocomplete search using jquery typeahead js simple and easy way. Just follow the few steps and implement autocomplete search in your laravel Application.
Jquery Typeahead js is bootstrap library that is work for autocomplete search in laravel 5.7 . Using typeahead js you can display the search results and it also provides several options for customization.
Contents
- Install Laravel 5.7 App
- Setup Database
- Generate Fake Records
- Make Routes
- Create Controller & Methods
- Create Blade View
- Conclusion
Install Laravel 5.7 App
First of we need to download laravel 5.7 fresh setup. Use the below command and download fresh new laravel setup :
Setup Database
After successfully install laravel 5.7 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
Generate Fake Records
Before we add fake records in database first migrate the table in database using the below command :
php artisan migrate
We need to 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();
Make Routes
Now we will create two routes one for show search input box and second for autocomplete search using jquery typeahead js autocomplete method :
Route::get('search', 'AutoCompleteController@index');
Route::get('autocomplete', 'AutoCompleteController@search');
Create Controller
We need to create a controller name AutoCompleteController. Use the below command and create Controller :
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);
}
}
Create Blade view
In this step we need to 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 jquery ui 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 5.7 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>
We have 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.
Start Development Server
We need to start development server. Use the php artisan serve command and start your server :
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Now we are ready to run our example so run bellow command to quick run.
http://localhost:8000/search
Or direct hit in your browser
http://localhost/AutoCompleteSearch/public/search
Conclusion
In this tutorial , We have successfully implemented autocomplete searching in our laravel 5.7 application using typeahead js. our examples run quickly.
Rrecommended Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
Hello.
Thank you for your tutorial which is very well done.
I would like to understand how to recover the identifier of the data for example if I want to insert them in another table.
Thank you in advance
SHITTY TUTORIAL
Hi, how to make searching list to link? If i click on the title, it’ll go to that route